收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > CSS/HTML > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

手機屏幕尺寸測試——手機的實際顯示頁面的寬度

手機站開發遇到一些問題,設計頁面使用多大的尺寸?為此做了一些研究,除IPhone特殊一些外,目前市面上的安卓系統的實際顯示頁面的寬度,都是360px。

手機型號 豎屏寬度 IPhone 5 320px IPhone 6 375px IPhone 6 Plus 414px Nexus 4 384px Android(大多數) 360px

前兩年,安卓的分辨率多數還是240px 或 320px,現在是360px,為了向下兼容,向上也兼容,最終將 360px 定為設計的尺寸,后期可以使用CSS3 Media Queries即媒體查詢特性做進一步的兼容,兼容其他設備,以及做一些設備的橫屏的兼容。

附:屏幕尺寸測試的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技術實現圓角效果
首先來簡單說一下什么是Sprites,Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當

《CSS3實戰》筆記--漸變設計(一)
基于CSS的漸變與圖片漸變相比,最大的優點是便于修改,同時支持無級縮放,過渡更加自然。目前,實現CSS漸變的只有基于Webkit和Gecko引擎的瀏覽器,基

《CSS3實戰》筆記--漸變設計(二)
Gecko引擎的CSS漸變設計直線漸變基本語法-moz-linear-gradient([point||angle,]stop,stop[,stop]*)參數說明:point:定義漸變起始點,取值包含數值,百分比,也可以使用

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
手游棋牌游戏运营
qq计划群 组选包胆选号技巧 丰云车神游戏辅助 可以建房间的炸金花app 欢乐生肖平台 时时彩后三组选6码 三公扑克牌手机游戏 三公玩法 五分彩票计划网 pk10飞艇计划微信群 时时彩一定位杀码技巧 亿彩彩票网址 牌九至尊下载链接 写出竞彩玩法的特点和优势 pk10不倍投技巧方法 重庆时时彩杀号