Ujian saiz skrin telefon bimbit - lebar halaman sebenar yang dipaparkan pada telefon bimbit_Pertukaran pengalaman-tutorial css-php.cn

Ujian saiz skrin telefon bimbit - lebar halaman sebenar yang dipaparkan pada telefon bimbit_Pertukaran pengalaman

WBOY

Lepaskan： 2016-05-16 12:03:33

asal

2248 orang telah melayarinya

Pembangunan laman web mudah alih menghadapi beberapa masalah. Apakah saiz yang harus digunakan untuk mereka bentuk halaman? Saya melakukan beberapa penyelidikan mengenai perkara ini dan mendapati bahawa, kecuali untuk iPhone khas, lebar halaman paparan sebenar sistem Android pada masa ini di pasaran ialah 360px.

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

Dalam dua tahun yang lalu, kebanyakan resolusi Android ialah 240px atau 320px Sekarang ia adalah 360px untuk menjadi serasi ke belakang dan ke atas, 360px akhirnya ditetapkan sebagai saiz reka bentuk atau media ciri pertanyaan boleh digunakan Keserasian lanjut, keserasian dengan peranti lain dan keserasian skrin mendatar beberapa peranti.

Dilampirkan: Kod JS untuk ujian saiz skrin, seperti berikut

<!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>

Salin selepas log masuk