모바일 브라우저에서 페이지가 확대되어 전체 뷰포트 너비에 있지 않습니다.

반응이 빠른 디자인에 문제가 있습니다. 모바일에 최적화되어 있으므로 뷰포트 메타 태그가 포함되어 있으므로 페이지가 확대되지 않고로드되고 전체 뷰포트를 차지해야합니다. 그러나, 여기에서 일어나는 것이다 :모바일 브라우저에서 페이지가 확대되어 전체 뷰포트 너비에 있지 않습니다.

(Screenshot) When loaded

참고로

(Screenshot) When zooming out

하부 툴바 메뉴 위치이다 고정 따라서는 "정상"되게 정상적인 페이지 플로우에 포함되지 폭. 이것은 Chrome과 Firefox 모바일에서 발생하므로 브라우저에 의존하지 않는다고 가정합니다. Chrome 원격 장치 디버깅 세션에서 헤더가 < 본문 > 및 <html> 요소와 정확히 동일하므로 페이지 자체에만 문제가 있으며 헤더만으로는 문제가되지 않습니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
    </head> 

    <body> 
    <div id="header"> 
     <h1>TremeClothing</h1> 
     <form id="search" action="page.php?stuff=things"> 
     <input type="text" name="search" autocomplete="off" spellcheck="false" /> 
     </form> 
    </div> 
    </body> 
</html>

그리고 : 귀하의 페이지가 제대로 확대되고

body { 
    margin: 0; 
    padding: 0; 
    background-color: rgb(240, 240, 240); 
    font-size: 20pt; 
} 

#header { 
    width: 100%; 
    padding: 0.5rem 1rem 1rem 1rem; 
    background-color: rgb(0, 51, 51); 
    position: relative; 
    box-sizing: border-box; 
    text-align: center; 
} 

#header h1 { 
    display: inline; 
    margin: 0; 
    padding: 0; 
    color: rgb(102, 153, 153); 
    font-size: 3rem; 
} 

#search { 
    display: inline-block; 
    height: 3rem; 
    width: 16rem; 
    margin: 1rem 3rem 0 3rem; 
} 

#search input { 
    display: block; 
    height: 100%; 
    width: 100%; 
    padding: 0.5rem 0.5rem 0.5rem 3rem; 
    box-sizing: border-box; 
    background: rgb(102, 153, 153) no-repeat 0.5rem 0.5rem/2rem url(img/icons/search.svg); 
    color: rgb(0, 51, 51); 
    font-size: 1.5rem; 
    font-weight: bold; 
    border: none; 
    border-radius: 2rem; 
} 

#search input:focus { 
    outline: none; 
}

출처

2017-09-05 Nik

여기 내 코드 (단순 제거 메뉴)입니다. 당신의 #search이 양쪽에 3rem의 고정 마진에 추가, 고정 폭, 16rem는, 전화기 화면보다 약간 넓게 나오는 때문에

검색 창 페이지를 슬라이드 시작하는 이유는 . 당신의 #search 스타일이를 사용해보십시오 : 이것은 당신의 #search의 폭이 유체 있는지 확인하고 화면의 폭 결코보다 100 % 이상됩니다

display: inline-block; 
height: 3rem; 
width: 80%; 
max-width: 16rem; 
margin: 1rem 10% 0 10%;

출처

2017-09-06 01:52:12 SpyderScript

모바일 브라우저에서 페이지가 확대되어 전체 뷰포트 너비에 있지 않습니다.

답변

관련 문제