viewport 엿보기
5079 단어 viewport
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> 320 *480 , 320*480=15 , 15 ， DPI ：300 dpi， 300 . dpi . / DPI= ( )A pixel is not a pixel is not a pixel
A tale of two viewports — part one
그러나 내가 하고자 하는 응용 프로그램 중 하나는viewport를 이용하고 축소를 이용해야 한다.실제 해상도가 얼마든지, 물리적 사이즈가 얼마든지, 나는 브라우저에서 통일된 해상도가 있고, 사용자가 축소하는 것도 허용하지 않기를 바란다.내가 테스트하는 장치는 아이폰4, 아이패드2, htc의 g11, 어떤 업체의 aquos 아이폰(android 시스템), 화려한 안드로이드 패드, dell의 win 아이폰이다. 그리고 나는 다음과 같은 문제에 부딪혔다.
1)viewport를 표시하지 않으면 width의 기본값은 980입니다.만약 페이지의 모든 요소의 폭이 980보다 작다면, 이때width는 980이고, 페이지의 가장 넓은 위치가 980을 넘으면 width는 최대 폭과 같다.한 마디로 하면, 기본적으로 전체 페이지를 왼쪽에서 오른쪽으로 표시할 수 있다.만약viewport를 설정했다면, 예를 들어 단순히user-scalable=no만 설정했다면, 예를 들어
2) ios 장치에 대해서는 width 설정이 적용되지만android에 대해서는 width 설정이 적용되지 않습니다.ios 장치, 축소 비율 즉 dpi는 당신이 설정한 width와 실제 해상도 설정을 통해 자동으로 계산됩니다.android에서 당신이 설정한 width는 무효입니다. 당신이 설정할 수 있는 필드는 특수한 target-densitydpi입니다. target-densitydpi에 관해서는 이 글을 참고할 수 있습니다.http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html.즉, 브라우저 width, 장치 진실 width, dpi 세 가지 변수가 있다.간단하게 하나의 공식으로 그들 사이의 관계를 표현합시다(진실한 관계가 아니라 간단하게 설명용) 장치 진실width*dpi = 브라우저width, 이곳의 세 가지 변수, 장치 진실width는 우리가 조작할 수 없는 이미 알고 있는 값입니다. 다른 두 변수는 우리가 설정하여 다른 변수에 영향을 줄 수 있습니다. ios에서 우리가 바꿀 수 있는 것은 브라우저width, dpi가 자동으로 생성되고android에서우리가 바꿀 수 있는 것은 dpi, 브라우저width가 자동으로 생성되는 것입니다.android에 대해 우리가 어떻게width를 설정하든지 브라우저width에 영향을 주지 않습니다.
ps: 여기서 이상한 질문 하나 더 할게요. htc의 g11에서(htc의 핸드폰은 이것밖에 없어요. 다른 것은 예측할 수 없어요) 만약에 dpi를 설정하고 와이파이를 표시하지 않으면user-scalable=no가 효과가 없어요. 즉, 는 사용자의 화면 축소를 막을 수 없어요.width 값을 표시적으로 설정해야 합니다. 이 값만android 아래의 브라우저 해상도에 아무런 영향을 미치지 않습니다. (ios에 영향을 미칠 수 있습니다.) 이 값을 설정해야 합니다. 그리고 이 값은 320보다 커야 합니다. 320보다 작으면 user-scalable=no가 효력을 발생시킬 수 없습니다.이 문제는 htc의 g11 핸드폰에서만 발생하고aquosphone에서는 이 문제가 없습니다.android를 호환하는 것은 정말 골치 아픈 일입니다 @ @,미래는 아직 얼마나 많은 구덩이가 있는지 모른다.winphone에서 결과는 더욱 이상하다. 나는viewport의 width에 480보다 큰 값을 설정하면user-scalable=no는 효력을 상실하고 480보다 작은 값을 설정하면user-scalable=no는 효력을 발생시킨다.그러나viewport의width에 얼마의 값을 설정하든지 상관없이winphone이 진정으로 표시하는width는 내가 예상한 영향을 미치지 않고 target-densitydpi를 통해서도 영향을 주지 않는다.width를 설정합니다. 480보다 작으면 화면이 축소됩니다. 그러나 축소된 비율은 예상과 완전히 다르기 때문에 어떤 규칙에 따라 축소되었는지 모르겠습니다.이것이 winphone의 문제인지 dell이 실현한 문제인지 모르겠다.
3) 이것은 앞의 것과 직접적으로 관련이 있어야 한다. ios 장치가 가로세로로 할 때 dpi를 자동으로 조정한다. 가로세로든 세로든 브라우저 width는viewport에 설정된 값과 같기 때문에 가로세로로 할 때 페이지에 표시된 내용의 크기는 자동으로 축소되어 변화한다.android 핸드폰은 가로로 세로로 할 때 dpi를 바꾸지 않고 가로로 할 때 웹 페이지가 축소되지 않는다.그렇기 때문에ios는 가로세로 페이지가 스크롤 바가 생기지 않고 전체 화면에 표시되는 것을 보장할 수 있지만android는 이를 보장할 수 없다. 가로세로 화면이 가득 차면 전체 화면이 가득 차지 않고 반대로도 마찬가지다.
4) ios 장치에 대해 width 디스플레이가 정의되어 있고 페이지의 가장 넓은 위치가 width를 초과하면 width가 무효이며, 가장 넓은 너비에 따라 표시됩니다. (스크롤 바가 없습니다.)그러나 이때 이상한 문제가 발생한다. 휴대전화의 가로세로 화면을 몇 번 바꾸면 페이지가 자동으로 확대되고 스크롤 바가 생기는 것을 발견할 수 있다. 그러나 확대된 너비는 사실 네가 설치한 width와도 상관없다.이러한 상황을 방지하기 위해서, 페이지의 가장 넓은 곳보다 더 넓거나 같게 width의 폭을 설정해야 합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
viewport 엿보기이런 전체적인 요소에 따라 서로 다른 설비에 제품의 표시가 완전하지 않고 위치가 틀리며 축소될 수 있다.이런 상황을 피하기 위해 사파리가 먼저 메타-viewport 라벨을 정의했는데 그 역할은 디자이너가 수동으로 브...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
