meta viewport 에서 target-densitydpi 속성 에 대한 상세 한 설명(추천)

얼마 전에 WAP 페이지 를 만 들 었 는데 페이지 에 meta viewport 의 대중 속성 이 설정 되 어 있 습 니 다.즉,:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" > 그러나 페이지 가 핸드폰 화면 에 따라 자동 으로 크기 를 조정 하지 않 는 것 을 발 견 했 습 니 다.나중에 다른 동료 에 게 도움 을 받 아 해결 해 주 었 습 니 다.소스 코드 를 보 니 원래 view port 에 target-density dpi 속성 이 추 가 된 것 을 발 견 했 습 니 다.처음에는 잘 몰 랐 고 그 당시 에 자신의 손 에 다른 수요 가 있 었 기 때문에 최근 에 갑자기 이 일이 생각 나 서 불 시의 수요 에 대비 하여 그것 에 대해 알 아 보 려 고 했다.
먼저 이 속성 이 도대체 무엇 을 하 는 지 알 아 보고 인터넷 에서 간단 한 소 개 를 발췌 했다.다음 과 같다.
하나의 화면 픽 셀 밀 도 는 화면 해상도 에 의 해 결정 되 며,일반적으로 인치 당 수량(dpi)으로 정의 된다.Android 는 세 가지 화면 픽 셀 밀 도 를 지원 합 니 다:저 픽 셀 밀도,중 픽 셀 밀도,고 픽 셀 밀도.픽 셀 밀도 가 낮은 화면 은 인치 당 픽 셀 포인트 가 더 적 고,픽 셀 밀도 가 높 은 화면 은 인치 당 픽 셀 포인트 가 더 많다.android Browser 와 WebView 기본 화면 은 픽 셀 밀도 입 니 다.
다음은 target-densitydpi 속성의 수치 범위 입 니 다.
device-dpi C 는 장치 원본 dpi 를 대상 dp 로 사용 합 니 다.기본 크기 조정 이 일어나 지 않 습 니 다.
high-dpi C 는 hdpi 를 목표 dpi 로 사용 합 니 다.중간 픽 셀 밀도 와 저 픽 셀 밀도 장 치 는 상응 하 게 축소 된다.
medium-dpi C 는 mdpi 를 대상 dpi 로 사용 합 니 다.고 화소 밀도 장 치 는 상응 하 게 확대 되 고 화소 밀도 장 치 는 상응 하 게 축소 된다.이것 은 기본 target density 입 니 다.
low-dpi-mdpi 를 대상 dpi 로 사용 합 니 다.중간 픽 셀 밀도 와 높 은 픽 셀 밀도 장 치 는 상응 하 게 확대 된다.
C 는 target dpi 로 구체 적 인 dpi 값 을 지정 합 니 다.이 값 의 범 위 는 70C 400 사이 여야 합 니 다.
주의:이상 의 정 보 는https://www.jb51.net/html5/177188.html에서 추출 합 니 다.
위의 정 보 는 저도 안 드 로 이 드 홈 페이지 에서 관련 자 료 를 찾 았 습 니 다.이 자 료 는 위의 URL 페이지 에서 모두 번역 되 었 습 니 다!
이 소개 에서 다음 과 같은 정 보 를 얻 을 수 있다.
1.화면 해상 도 를 말 합 니 다.현재 대부분의 스마트 폰 화면 은 viewport 의 width 를 통 해 페이지 폭 을 조정 할 수 있 습 니 다.사실은 제 이 해 는 화면 이 이 페이지 의 해상 도 를 조정 하 는 것 입 니 다.다만 이 값 은 직관 적 으로 설정 하 는 것 이 아니 라 브 라 우 저 는 width 값 을 통 해 계산 할 수 있 습 니 다.
2.이 속성 은 안 드 로 이 드 시스템 에 만 작용 하고 고유 속성 입 니 다.iOS 가 지원 하지 않 기 때문에 호환성 문제 가 있 습 니 다.페이지 가 ios 와 android 를 호 환 한다 면.
3.이 속성 은 수치 가 매우 많 지만 보통 개인 이 많이 사용 하 는 것 은 다섯 번 째,즉 사용자 정의 일 수 있 습 니 다.이것 은 전단 의 네 개의 값 을 기억 할 필요 가 없 기 때 문 입 니 다.
이런 정보 가 있 으 면 저도 삼 성 i9100 을 꺼 내 테스트 를 했 는데 효 과 는 다음 과 같 습 니 다.
HTML 구조 먼저 붙 이기:


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>     </title> 
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,target-densitydpi=360" /> 
<link href="inc/base-min.css" rel="external nofollow" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
body{border:4px solid #F00;} 
</style> 
</head> 
 
<body> 
<p>                  ，  -webkit-device-pixel-ratio  media    js   window.devicePixelRatio    ，  target-densitydpi   device-dpi  。            。</p> 
<p> iOS    meta ， apple-mobile-web-app-capable  apple-mobile-web-app-status-bar-style，                  ，       。</p> 
<div class="demo"> 
<img src="images/mm1.jpg"> 
<br /> 
<img src="images/mm2.jpg"> 
<br /> 
<img src="images/mm3.jpg"> 
</div> 
</body> 
</html>

chrome android 버 전()
속성의 모든 수 치 는 지원 되 지 않 습 니 다!
효과:

UC(최신 버 전 V 9.1)
모든 속성 은 지원 합 니 다.구체 적 인 상황 은 다음 과 같 습 니 다.
device-dpihigh-dpimedium-dpilow-dpi70

360400

시스템 자체 테이프(android 4.1.2)
모든 속성 은 지원 합 니 다.구체 적 인 상황 은 다음 과 같 습 니 다.
device-dpihigh-dpimedium-dpilow-dpi70

360400

테스트 를 볼 때 그림 과 문자 크기 의 변 화 를 동시에 주의 하지만!
요약:
각 브 라 우 저의 테스트 효 과 를 보면 안 드 로 이 드 WEB 와 UC 만 이 속성 을 지원 합 니 다.현재 국내 모 바 일 브 라 우 저가 차지 하 는 비율 로 볼 때 UC 사용률 이 매우 높 기 때문에 안 드 로 이 드 측 에서 이 속성 을 사용 하여 문 제 를 해결 하면 큰 지원 을 받 을 수 있 습 니 다.또한 이 속성 에서 마지막 사용자 정의 값 에 대해 서 는 최대 값 400 을 초과 하거나 최소 값 70 보다 작 을 때 설정 한 사용자 정의 값 이 무 시 됩 니 다.시스템 은 기본 값 인 medium-dpi 를 사용 하여 표 시 됩 니 다.
또한 이 속성 을 찾 는 동 료 는 인터넷 에서 얻 은 또 다른 정 보 는 WEBKIT 가 이 속성 에 대해 더 이상 지원 하지 않 는 다 는 것 입 니 다.구체 적 인 정 보 는 다음 과 같 습 니 다.
https://lists.webkit.org/pipermail/webkit-dev/2012-June/020914.html
There's some concern that target-densitydpi is used by some apps that
are bundled with Android, but folks appear willing to deprecate the
feature and to migrate those apps to using other mechanisms, such as
responsive images and CSS device units.
그러나 제 개인 테스트 를 통 해 적어도 안 드 로 이 드 의 현재 4.1.2 는 이 속성 에 대한 지원 이 있 을 것 입 니 다.아마도 이전의 오래된 버 전에 도 지원 이 있 을 것 입 니 다!
이상 의 정 보 는 모두 개인 테스트 를 통 해 얻 은 것 입 니 다.만약 에 서로 다른 견해 가 있다 면 여러분 들 이 교 류 를 할 수 있 기 를 바 랍 니 다.감사합니다!
또한 WEBKIT 가 더 이상 이 속성 에 있 지 않 은 또 다른 해결 방법 은 인터넷 에서 비교적 많이 언급 한 두 가지 방안 이다.
1、responsive images
2、CSS device units
참조 링크:https://www.jb51.net/article/121515.htm
참조 링크:https://www.jb51.net/article/121531.htm
이 두 가지 물건 이 도대체 어떤 지 나 도 진일보 한 이 해 를 할 것 이다.이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 십시오.저희 에 대한 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SQL 쿼리 작성에 대한 두 번째 연습

내가 작성할 쿼리는 활성 사용자 중 몇 퍼센트가 적어도 하나의 환영 기사에 댓글을 달았는지 답하는 데 도움이 됩니다. 이 쿼리에서 활성 사용자는 지난 7일 중 4일 동안 사이트에 있었던 사람입니다. 아래는 네 가지 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

meta viewport 에서 target-densitydpi 속성 에 대한 상세 한 설명(추천)

좋은 웹페이지 즐겨찾기