모바일 기기에서 웹 페이지를 재구성하거나 개발할 때 가장 먼저 이해해야 할 것은 모바일 기기의 뷰포트입니다. 뷰포트의 개념을 이해하고 뷰포트와 관련된 메타 태그의 사용을 파악해야만 더 잘 적응할 수 있습니다. 또는 다른 해상도로 모바일 장치에 응답합니다.
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. 뷰포트의 개념
모바일 기기의 뷰포트는 쉽게 말하면 사용할 수 있는 기기의 화면입니다. 웹 페이지를 표시하려면 영역은 구체적으로 웹 페이지를 표시하는 데 사용되는 브라우저의 영역(앱의 웹뷰일 수도 있음)이지만 뷰포트는 브라우저 표시 영역으로 제한되지 않습니다. 크기는 브라우저의 표시 영역보다 크거나 작을 수 있습니다. 기본적으로 일반적으로 모바일 장치의 뷰포트는 브라우저의 표시 영역보다 큽니다. 이는 모바일 장치의 해상도가 데스크톱 컴퓨터의 해상도보다 작기 때문입니다. 데스크톱 브라우저는 일반적으로 장치에 표시됩니다. 모바일 장치의 브라우저는 기본 뷰포트를 980px 또는 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px로 설정합니다(다른 값일 수도 있으며 이는 장치 자체에 의해 결정됨). 브라우저의 표시 영역 너비가 기본 뷰포트 너비보다 작기 때문에 막대가 브라우저에 나타납니다. 아래 이미지에는 일부 장치에서 브라우저의 기본 뷰포트 너비가 나열되어 있습니다.
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. CSS의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px는 장치의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px과 다릅니다.
CSS에서는 일반적으로 px를 단위로 사용하면 데스크톱 브라우저의 CSS 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해픽셀은 컴퓨터 화면의 물리적 픽셀 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해개에 해당하는 경우가 많습니다. 이는 CSS의 픽셀이 장치의 물리적 픽셀인 것처럼 착각하게 만들 수 있습니다. 하지만 실제 상황은 그렇지 않습니다. CSS의 픽셀은 단지 추상적인 단위일 뿐입니다. 다른 장치나 다른 환경에서는 CSS에서 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px로 표시되는 장치의 물리적 픽셀이 다릅니다. 데스크톱 브라우저용으로 설계된 웹 페이지에서는 이에 대해 걱정할 필요가 없지만 모바일 장치에서는 이를 이해해야 합니다. 이전 모바일 장치에서는 해상도가 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0x뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해80인 iPhone 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해와 같이 화면 픽셀 밀도가 상대적으로 낮았습니다. iPhone 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해에서는 CSS 픽셀 하나가 실제로 화면의 실제 픽셀 하나와 같았습니다. 이후 기술이 발전하면서 모바일 기기의 화면 픽셀 밀도는 점점 더 높아졌다. 애플은 아이폰뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해부터 해상도를 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0x9뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0으로 두 배로 늘린 이른바 레티나 화면을 출시했지만 화면 크기는 변하지 않았다. 이는 동일한 크기의 화면에 두 배의 픽셀이 있다는 것을 의미합니다. 이때 CSS 픽셀 하나는 실제 픽셀 두 개와 같습니다. 다른 브랜드의 모바일 기기에서도 마찬가지입니다. 예를 들어 Android 기기는 화면 픽셀 밀도에 따라 ldpi, mdpi, hdpi, xhdpi 등과 같이 다양한 수준으로 나눌 수 있으며 Android 기기의 CSS 픽셀 하나는 몇 개에 해당합니다. 화면의 물리적 픽셀은 장치마다 다르며 결론은 없습니다.
CSS의 px 변화를 유발할 수 있는 또 다른 요소가 있는데, 바로 사용자 스케일링입니다. 예를 들어, 사용자가 페이지 크기를 두 배로 늘리면 CSS에서 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px로 표시되는 물리적 픽셀도 두 배가 됩니다. 반대로 페이지가 두 배로 늘어나면 CSS에서 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px로 표시되는 물리적 픽셀도 두 배로 늘어납니다. 이 점에 대해서는 이 기사의 뒷부분에서 논의할 것입니다.
모바일 브라우저 및 일부 데스크톱 브라우저에서 window 객체에는 devicePixelRatio 속성이 있습니다. 공식 정의는 다음과 같습니다. 즉, devicePixelRatio = 물리적입니다. 픽셀/독립 픽셀. CSS의 px는 장치의 독립적인 픽셀로 간주될 수 있으므로 devicePixelRatio를 통해 장치의 CSS 픽셀이 나타내는 물리적 픽셀 수를 알 수 있습니다. 예를 들어 Retina 화면이 있는 iPhone에서 devicePixelRatio의 값은 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해입니다. 이는 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해개의 CSS 픽셀이 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해개의 실제 픽셀과 동일함을 의미합니다. 그러나 devicePixelRatio는 여전히 다른 브라우저에서 일부 호환성 문제를 갖고 있으므로 현재는 이 항목을 완전히 신뢰할 수 없다는 점에 유의해야 합니다.
devicePixelRatio 테스트 결과:
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. PPK의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해개 뷰포트 이론
ppk 마스터는 모바일 장치의 뷰포트에 대해 많은 연구를 수행했습니다(뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해부, 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해부, 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해부). 관심 있는 학생들은 이 기사에서 많은 데이터와 의견을 살펴볼 수 있습니다. ppk는 모바일 장치에 세 개의 뷰포트가 있다고 믿습니다.
우선, 모바일 장치의 브라우저는 모바일 장치용으로 설계되지 않은 웹사이트라도 모든 웹사이트가 제대로 표시되도록 허용해야 한다고 믿습니다. 하지만 브라우저의 가시 영역을 뷰포트로 사용하는 경우, 모바일 기기의 화면이 그다지 넓지 않기 때문에 데스크탑 브라우저용으로 설계된 웹사이트를 모바일 기기에서 표시할 때 모바일 기기의 뷰포트는 너무 좁을 수밖에 없습니다. .그리고 무리가 많으면 레이아웃도 엉망이 됩니다. 어떤 사람들은 현재 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해8x뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 또는 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해080x뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0과 같이 매우 큰 해상도를 가진 휴대폰이 많지 않습니까? 이러한 휴대폰에서 데스크톱 브라우저용으로 설계된 웹사이트를 표시해도 괜찮습니까? 이전에 말했듯이 CSS의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px는 화면의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px를 나타내지 않습니다. 해상도가 클수록 CSS에서 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px로 표현되는 물리적 픽셀이 많아지고 devicePixelRatio의 값도 커지기 때문에 이해하기 쉽습니다. CSS의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px는 더 많은 물리적 픽셀을 나타내야 하므로 화면의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px 크기는 저해상도 장치의 크기와 비슷해야 합니다. 그렇지 않으면 너무 작아서 명확하게 볼 수 없습니다. 따라서 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해080x뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0과 같은 장치에서는 기본적으로 p의 너비를 전체 화면 너비인 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00픽셀 이상(devicePixelRatio 값에 따라 다름)으로 설정하기만 하면 됩니다. 주제로 돌아가서, 모바일 장치에서 브라우저의 표시 영역이 뷰포트로 설정되어 있으면 일부 웹사이트는 뷰포트가 너무 좁아서 어수선하게 표시되므로 이러한 브라우저는 기본적으로 뷰포트를 더 넓은 것으로 설정하기로 결정합니다. . ppk는 이 브라우저의 기본 뷰포트 레이아웃 뷰포트를 호출합니다. 이 레이아웃 뷰포트의 너비는 document.documentElement.clientWidth를 통해 얻을 수 있습니다.
그러나 레이아웃 뷰포트의 너비는 브라우저의 표시 영역 너비보다 크므로 브라우저의 표시 영역 크기를 나타내는 뷰포트도 필요합니다. ppk는 이 뷰포트를 시각적 뷰포트라고 부릅니다. 시각적 뷰포트의 너비는 window.innerWidth를 통해 얻을 수 있지만 Android 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해, Oprea mini 및 UC 8에서는 올바르게 얻을 수 없습니다.
이제 두 개의 뷰포트가 있습니다: 레이아웃 뷰포트 및 시각적 뷰포트 . 하지만 브라우저는 그것만으로는 부족하다고 느낍니다. 점점 더 많은 웹사이트가 모바일 기기용으로 별도로 설계되기 때문에 모바일 기기에 완벽하게 적응할 수 있는 뷰포트가 있어야 합니다. 소위 완벽한 적응이란 무엇보다도 사용자가 확대/축소 및 수평 스크롤 막대 없이 웹 사이트의 모든 콘텐츠를 정상적으로 볼 수 있다는 것을 의미합니다. 두 번째로 표시된 텍스트의 크기가 적절합니다. 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px의 텍스트는 텍스트 크기로 인해 표시되지 않습니다. 고밀도 픽셀 화면의 표시는 너무 작아서 명확하게 볼 수 없습니다. 이 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px 텍스트의 크기는 밀도에 관계없이 비슷합니다. 화면과 해상도. 물론 이는 텍스트뿐만 아니라 그림 등 다른 요소에도 해당됩니다. ppk는 이 뷰포트를 이상적인 뷰포트라고 부르는데, 이는 모바일 장치에 이상적인 뷰포트인 세 번째 뷰포트입니다.
이상적인 뷰포트에는 고정된 크기가 없습니다. 기기마다 이상적인 뷰포트가 다릅니다. 모든 iPhone의 이상적인 뷰포트 너비는 화면 너비가 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0이든 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0이든 상관없이 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px입니다. 즉, iPhone에서 CSS의 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px는 iPhone 화면의 너비를 나타냅니다.
그러나 Android 기기는 더 복잡합니다. 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px, 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px, 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해8뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px 등이 있습니다. 다양한 기기의 이상적인 뷰포트 너비는 얼마인지 확인할 수 있나요? 많은 장치에 대한 이상적인 너비를 수집하는 http://viewportsizes.com에 나와 있습니다.
요약하자면 ppk는 모바일 장치의 뷰포트를 레이아웃 뷰포트, 시각적 뷰포트 및 으로 나눕니다. 이상적인 뷰포트 세 가지 범주 중 이상적인 뷰포트는 모바일 장치에 가장 적합한 뷰포트입니다. 이상적인 뷰포트의 너비는 모바일 장치의 화면 너비와 같습니다. 요소는 CSS 너비(단위는 px)에서 이상적인 뷰포트로 설정되며, 이 요소의 너비는 장치 화면의 너비이며, 이는 너비 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00%의 효과입니다. 이상적인 뷰포트의 중요성은 어떤 화면 해상도를 사용하든 사용자가 수동으로 확대/축소하거나 가로 스크롤 막대를 사용하지 않고도 이상적인 뷰포트에 맞게 설계된 웹 사이트를 사용자에게 완벽하게 표시할 수 있다는 것입니다.
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. 메타 태그를 사용하여 뷰포트 제어
모바일 장치의 기본 뷰포트는 레이아웃 뷰포트보다 넓습니다. 화면 뷰포트가 필요하지만 모바일 장치용 웹사이트를 개발할 때 필요한 것은 이상적인 뷰포트입니다. 그렇다면 이상적인 뷰포트를 어떻게 얻을 수 있습니까? 이제 메타태그가 나타날 차례입니다.
모바일 장치용 웹사이트를 개발할 때 가장 일반적인 작업 중 하나는 다음을 head 태그에 복사하는 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해.0, maximum-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해.0, user-scalable=0">
메타 태그의 기능은 다음과 같습니다. 사용자가 수동으로 확대/축소할 수 없도록 하면서 현재 뷰포트의 너비를 장치의 너비와 동일하게 만듭니다. 웹사이트마다 사용자가 확대/축소할 수 있도록 요구하는 사항이 다를 수 있지만, 뷰포트의 너비를 기기의 너비와 동일하게 만드는 것이 모두가 원하는 효과일 것입니다. 이렇게 설정하지 않으면 화면 비율이 사용됩니다. . 기본 뷰포트는 넓습니다. 즉, 가로 스크롤 막대가 나타납니다.
viewport라는 이름의 이 메타 태그에는 정확히 무엇이 포함되어 있고, 그 기능은 무엇인가요?
메타 뷰포트 태그는 Apple이 모바일 기기의 뷰포트 문제를 해결하기 위해 Safari 브라우저에 처음 도입한 태그입니다. 나중에 Android 및 주요 브라우저 제조업체도 이에 따라 메타 뷰포트에 대한 지원을 도입했으며 이 기능이 여전히 매우 유용하다는 사실도 입증되었습니다.
Apple 사양에서 메타 뷰포트에는 다음과 같이 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해개의 속성이 있습니다(콘텐츠 속성 및 값에서 이를 호출하겠습니다).
| 너비 | 설정
레이아웃 뷰포트 의 너비를 양의 정수 또는 문자열 "width-device" | ||||||||||||
| initial-scale | 페이지의 초기 배율 값을 설정합니다. 숫자는 소수점 이하 자릿수가 허용됩니다. | ||||||||||||
| minimum-scale | 사용자가 허용하는 최소 스케일링 값은 숫자이며 소수점 이하 자릿수도 허용됩니다. < /td> | ||||||||||||
| 최대 배율 | 허용되는 최대 확대/축소 값입니다. user 는 소수점 이하 숫자입니다. | ||||||||||||
| 높이 |
| ||||||||||||
| 사용자 확장 가능 | 사용자가 확대/축소할 수 있는지 여부에 따라 값은 "no" 또는 "yes"이며, no는 허용되지 않음을 의미합니다. yes 허용됨을 의미합니다. |
特别说明的是，当 target-densitydpi=device-dpi 时， css中的뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px会等于物理像素中的뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px。
因为这个属性只有安卓支持，并且安卓已经决定要废弃target-densitydpi 这个属性了，所以这个属性我们要避免进行使用 。
五、把当前的viewport宽度设置为 ideal viewport 的宽度
要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。
<meta name="viewport" content="width=device-width">
下图是这句代码在各大移动端浏览器上的测试结果：
可以看到通过width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。
这样的写法看起来谁都会做，没吃过猪肉，谁还没见过猪跑啊~，确实，我们在开发移动设备上的网页时，不管你明不明白什么是viewport，可能你只需要这么一句代码就够了。
可是你肯定不知道
<meta name="viewport" content="initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해">
这句代码也能达到和前一句代码一样的效果，也可以把当前的的viewport变为 ideal viewport。
呵呵，傻眼了吧，因为从理论上来讲，这句代码的作用只是不对当前的页面进行缩放，也就是页面本该是多大就是多大。那为什么会有 width=device-width 的效果呢？
要想清楚这件事情，首先你得弄明白这个缩放是相对于什么来缩放的，因为这里的缩放值是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해，也就是没缩放，但却达到了 ideal viewport 的效果，所以，那答案就只有一个了，缩放是相对于 ideal viewport来进行缩放的，当对ideal viewport进行뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00%的缩放，也就是缩放值为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해的时候，不就得到了 ideal viewport吗？事实证明，的确是这样的。下图是各大移动端的浏览器当设置了<meta name="viewport" content="initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해"> 后是否能把当前的viewport宽度变成 ideal viewport 的宽度的测试结果。
测试结果表明 initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 也能把当前的viewport宽度变成 ideal viewport 的宽度，但这次轮到了windows phone 上的IE 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。但这点小瑕疵已经无关紧要了。
但如果width 和 initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해同时出现，并且还出现了冲突呢？比如：
<meta name="viewport" content="width=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00, initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해">
width=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00表示把当前viewport的宽度设为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00px，initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해则表示把当前viewport的宽度设为ideal viewport的宽度，那么浏览器到底该服从哪个命令呢？是书写顺序在后面的那个吗？不是。当遇到这种情况时，浏览器会取它们两个中较大的那个值。例如，当width=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00，ideal viewport的宽度为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0时，取的是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00；当width=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00， ideal viewport的宽度为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해80时，取的是ideal viewport的宽度。（ps:在uc9浏览器中，当initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해时，无论width属性的值为多少，此时viewport的宽度永远都是ideal viewport的宽度）
最后，总结一下，要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해，但这两者各有一个小缺陷，就是iphone、ipad以及IE 会横竖屏不分，通通以竖屏的ideal viewport宽度为准。所以，最完美的写法应该是，两者都写上去，这样就 initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病：
<meta name="viewport" content="width=device-width, initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해">
六、关于meta viewport的更多知识
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해、关于缩放以及initial-scale的默认值
首先我们先来讨论一下缩放的问题，前面已经提到过，缩放是相对于ideal viewport来缩放的，缩放值越大，当前viewport的宽度就会越小，反之亦然。例如在iphone中，ideal viewport的宽度是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px，如果我们设置 initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 ，此时viewport的宽度会变为只有뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px了，这也好理解，放大了一倍嘛，就是原来뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px的东西变成뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px了，但是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px变为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px并不是把原来的뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px变为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px了，而是在实际宽度不变的情况下，뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px变得跟原来的뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px的长度一样了，所以放大뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해倍后原来需要뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px才能填满的宽度现在只需要뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px就做到了。因此，我们可以得出一个公式：
visual viewport宽度 = ideal viewport宽度 / 当前缩放值 当前缩放值 = ideal viewport宽度 / visual viewport宽度
ps: visual viewport的宽度指的是浏览器可视区域的宽度。
大多数浏览器都符合这个理论，但是安卓上的原生浏览器以及IE有些问题。安卓自带的webkit浏览器只有在 initial-scale = 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 以及没有设置width属性时才是表现正常的，也就相当于这理论在它身上基本没用；而IE则根本不甩initial-scale这个属性，无论你给他设置什么，initial-scale表现出来的效果永远是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해。
好了，现在再来说下initial-scale的默认值问题，就是不写这个属性的时候，它的默认值会是多少呢？很显然不会是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해，因为当 initial-scale = 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해 时，当前的layout viewport宽度会被设为 ideal viewport的宽度，但前面说了，各浏览器默认的 layout viewport宽度一般都是980啊，뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해啊，800啊等等这些个值，没有一开始就是 ideal viewport的宽度的，所以 initial-scale的默认值肯定不是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해。安卓设备上的initial-scale默认值好像没有方法能够得到，或者就是干脆它就没有默认值，一定要你显示的写出来这个东西才会起作用，我们不管它了，这里我们重点说一下iphone和ipad上的initial-scale默认值。
根据测试，我们可以在iphone和ipad上得到一个结论，就是无论你给layout viewpor设置的宽度是多少，而又没有指定初始的缩放值的话，那么iphone和ipad会自动计算initial-scale这个值，以保证当前layout viewport的宽度在缩放后就是浏览器可视区域的宽度，也就是说不会出现横向滚动条。比如说，在iphone上，我们不设置任何的viewport meta标签，此时layout viewport的宽度为980px，但我们可以看到浏览器并没有出现横向滚动条，浏览器默认的把页面缩小了。根据上面的公式，当前缩放值 = ideal viewport宽度 / visual viewport宽度，我们可以得出：
当前缩放值 = 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0 / 980
也就是当前的initial-scale默认值应该是 0.뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해这样子。当你指定了initial-scale的值后，这个默认值就不起作用了。
总之记住这个结论就行了：在iphone和ipad上，无论你给viewport设的宽的是多少，如果没有指定默认的缩放值，则iphone和ipad会自动计算这个缩放值，以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해、动态改变meta viewport标签
第一种方法
可以使用document.write来动态输出meta viewport标签，例如：
document.write(&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;<meta name="viewport" content="width=device-width,initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해">&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;)
第二种方法
通过setAttribute来改变
<meta id="testViewport" name="viewport" content="width = 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해80"><script>var mvp = document.getElementById(&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;testViewport&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;); mvp.setAttribute(&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;content&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;,&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;width=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해80&#뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해9;);</script>
安卓뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해.뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해自带浏览器上的一个bug
<meta name="viewport" content="width=device-width">
测试的手机ideal viewport 宽度为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px，第一次弹出的值是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00,但这个值应该是第行meta标签的结果啊，然后第二次弹出的值是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0，这才是第一行meta标签所达到的效果啊，所以在安卓뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해.뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해(或许是所有뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해.x版本中)的自带浏览器中，对meta viewport标签进行覆盖或更改，会出现让人非常迷糊的结果。
七、结语
说了那么多废话，最后还是有必要总结一点有用的出来。
首先如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。
第二、每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해也有把viewport的宽度设为理想宽度的作用。所以，我们可以使用
<meta name="viewport" content="width=device-width, initial-scale=뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해">
来得到一个理想的viewport（也就是前面说的ideal viewport）。
为什么需要有理想的viewport呢？比如一个分辨率为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0x뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해80的手机理想viewport的宽度是뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px，而另一个屏幕尺寸相同但分辨率为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0x9뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0的手机的理想viewport宽度也是为뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0px，那为什么分辨率大的这个手机的理想宽度要跟分辨率小的那个手机的理想宽度一样呢？这是因为，只有这样才能保证同样的网站在不同分辨率的设备上看起来都是一样或差不多的。实际上，现在市面上虽然有那么多不同种类不同品牌不同分辨率的手机，但它们的理想viewport宽度归纳起来无非也就 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0、뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해0、뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해8뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해、뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해00等几种，都是非常接近的，理想宽度的相近也就意味着我们针对某个设备的理想viewport而做出的网站，在其他设备上的表现也不会相差非常多甚至是表现一样的。
【相关推荐】
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. 特别推荐：“php程序员工具箱”V0.뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해版本下载
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. 关于viewport兼容性问题的实例代码
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例
뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해. HTML뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해中Viewport的参数介绍以及使用方法
위 내용은 뷰포트 특별 주제: CSS-뷰포트의 반응형 웹 디자인에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
