2013-09-16 2 views
2

부트 스트랩 3.0 패널을 사용 중이며 모바일 장치에서 페이지가 응답하지 않는 이유를 알아 내려고합니다. 데스크톱 브라우저에서는 제대로 표시되지만 모바일 장치에서 최적화 된 것은 표시되지 않습니다.HTML 부트 스트랩 CSS를 사용하지 않는 경우

부트 스트랩 사이트의 panel examples은 실제로 모바일에 최적화되어 표시됩니다.

내가 누락 된 항목이 있습니까? 당신이 당신의 HTML의 머리에 뷰포트 태그가 없습니다 것 같은

<!DOCTYPE html> 
<html lang="en"> 
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 

    <title>a title</title> 
    </head> 

    <body> 
    <div class="container"> 
     <div class="row"> 
    <div class="panel panel-default"> 
     <div class="panel-body"> 
     <div class="media"> 
      <div class="media-body"> 
     <div class="row-fluid"> 
      <div class="row"> 
      <div class="col-md-12"><h1 class="media-heading">This is a heading using h1s.</h1></div> 
      </div> 
     </div> 
     <br> 
     <div class="row-fluid"> 
      <div class="span4 top-buffer"> 

      </div> 
     </div> 
      </div> 
     </div> 
     <br> 
     </div> 
    </div> 
     </div>  
    </div> 
    </body> 
</html> 

답변

4

가 보이는 :

다음은 HTML입니다. 이처럼 Docs

:

이 텍스트 읽기 너무 작 으면 줌을 사용하지 않도록 설정하는 것은 나쁜 아이디어라고 주장 때문에 다른 사용자와 다양한 기기에서 테스트하는데주의를 기울여야 될 수있는 경우를 제외하고
<meta content='maximum-scale=1.0, initial-scale=1.0, width=device-width' name='viewport'> 

마음에.

+0

굉장합니다. 그거였다! – Raj

+1

예, 확대/축소는 _ 보통 _ 나쁜 것입니다. '최대 -scale = 1.0, '을 제거하여 되돌립니다. –

+0

이것은 실제 라이브 세이버였습니다! – dmeu

관련 문제