Test der Bildschirmgröße des Mobiltelefons – die Breite der tatsächlich angezeigten Seite auf der Mobiltelefon-Experience-Börse-CSS-Tutorial-php.cn

Test der Bildschirmgröße des Mobiltelefons – die Breite der tatsächlich angezeigten Seite auf der Mobiltelefon-Experience-Börse

WBOY

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

Original

2260 Leute haben es durchsucht

Bei der Entwicklung mobiler Websites treten einige Probleme auf. Welche Größe sollte zum Entwerfen der Seite verwendet werden? Ich habe diesbezüglich einige Nachforschungen angestellt und festgestellt, dass die tatsächliche Anzeigeseitenbreite der derzeit auf dem Markt befindlichen Android-Systeme mit Ausnahme des speziellen iPhone 360 Pixel beträgt.

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

In den letzten zwei Jahren waren die meisten Android-Auflösungen 240 Pixel oder 320 Pixel. Um abwärts- und aufwärtskompatibel zu sein, wurde in der späteren Phase CSS3-Medienabfragen schließlich auf 360 Pixel festgelegt Abfragefunktionen können verwendet werden, weitere Kompatibilität, Kompatibilität mit anderen Geräten und horizontale Bildschirmkompatibilität einiger Geräte.

Angehängt: JS-Code für den Bildschirmgrößentest, wie folgt

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

Nach dem Login kopieren