모바일 웹 사이트가 장치보다 넓게 표시됩니다. 꼬집어지면

Question

나는 반응이 필요한 웹 사이트를 디자인하고 있습니다.

제 문제는 모바일 장치에서 이러한 웹 사이트가 처음에 화면보다 더 넓게 표시된다는 것입니다. 주 용기가 100 %로 "고정"되지 않은 것처럼 왼쪽 또는 오른쪽으로 이동할 수 있음을 의미합니다. 그러나이 : ​​

#main-container { 
    width: 100%; 
} 

하지만 "핀치"화면 한 번 (함께 손가락으로 눌러), 웹 사이트가 완벽하게 제시, 모든 div를 화면 안에있는 및 사이트가 읽을 수 있습니다. 완벽하게 반응하는 웹 사이트처럼.

하위 페이지로 새로 고침하거나 이동할 경우 사이트가 다시 화면보다 커서 함께 모아야하며 다시 확인해야합니다.

414 픽셀 이하의 모든 스마트 폰 (Android 및 iphone)에서 발생합니다. 태블릿 이상은 괜찮습니다

어디서나 기기 내부에서 열어야하는 웹 사이트에 어떻게 말 할 수 있습니까?

Answer 1

메타 태그 viewport의 initial-scale을 정의하면 도움이 될 것입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

여기에 대해 자세히 알아보기 : <메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1.0, 최대 규모 = 1.0 : https://www.w3schools.com/css/css_rwd_viewport.asp