집 > 기사 > 웹 프론트엔드 > 휴대폰 화면 크기 테스트 - 휴대폰에 실제 표시되는 페이지의 너비_체험교체

휴대폰 화면 크기 테스트 - 휴대폰에 실제 표시되는 페이지의 너비_체험교체

WBOY원래의: 2016-05-16 12:03:332232검색

모바일 웹사이트 개발 시 페이지 디자인에 어떤 크기를 사용해야 합니까? 이에 대해 조사한 결과 특수 iPhone을 제외하고 현재 시중에 나와 있는 Android 시스템의 실제 표시 페이지 너비는 360px이라는 사실을 발견했습니다.

手机型号	竖屏宽度
IPhone 5	320px
IPhone 6	375px
IPhone 6 Plus	414px
Nexus 4	384px
Android(大多数)	360px

지난 2년 동안 대부분의 Android 해상도는 240px 또는 320px이었습니다. 이제는 하위 및 상위 호환성을 위해 최종적으로 CSS3 미디어 쿼리 또는 미디어 크기로 360px을 설정했습니다. 추가 호환성, 다른 기기와의 호환성, 일부 기기의 수평 화면 호환성 등의 쿼리 기능을 사용할 수 있습니다.

첨부: 화면 크기 테스트를 위한 JS 코드는 다음과 같습니다

<!DOCTYPE html>
<html>
<head>
 <title>屏幕尺寸测试</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="apple-mobile-web-app-capable" content="yes" />
 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>

<body style="padding:0px;margin:0px;" scroll="no">
	<script language="javascript">
		var s = "";
		s += "网页可见区域宽："+ document.body.clientWidth;
		s += "<br>网页可见区域高："+ document.body.clientHeight;
		s += "<br>网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
		s += "<br>网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
		s += "<br>网页正文全文宽："+ document.body.scrollWidth;
		s += "<br>网页正文全文高："+ document.body.scrollHeight;
		s += "<br>网页被卷去的高："+ document.body.scrollTop;
		s += "<br>网页被卷去的左："+ document.body.scrollLeft;
		s += "<br>网页正文部分上："+ window.screenTop;
		s += "<br>网页正文部分左："+ window.screenLeft;
		s += "<br>屏幕分辨率的高："+ window.screen.height;
		s += "<br>屏幕分辨率的宽："+ window.screen.width;
		s += "<br>屏幕可用工作区高度："+ window.screen.availHeight;
		s += "<br>屏幕可用工作区宽度："+ window.screen.availWidth;
		s += "<br>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
		s += "<br>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
		document.write(s);
	</script>
</body>
</html>

성명：

이전 기사：CSS는 둥근 모서리를 달성하기 위해 Sprites 기술을 사용합니다. 경험 교환다음 기사：CSS는 둥근 모서리를 달성하기 위해 Sprites 기술을 사용합니다. 경험 교환

휴대폰 화면 크기 테스트 - 휴대폰에 실제 표시되는 페이지의 너비_체험교체

관련 기사