手机站点html 长度,手机屏幕尺寸测试——手机的实际显示页面的宽度

手机站开发遇到一些问题，设计页面使用多大的尺寸？为此做了一些研究，除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代码，如下

屏幕尺寸测试

var s = "";

s += "网页可见区域宽："+ document.body.clientWidth;

s += "
网页可见区域高："+ document.body.clientHeight;

s += "
网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";

s += "
网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";

s += "
网页正文全文宽："+ document.body.scrollWidth;

s += "
网页正文全文高："+ document.body.scrollHeight;

s += "
网页被卷去的高："+ document.body.scrollTop;

s += "
网页被卷去的左："+ document.body.scrollLeft;

s += "
网页正文部分上："+ window.screenTop;

s += "
网页正文部分左："+ window.screenLeft;

s += "
屏幕分辨率的高："+ window.screen.height;

s += "
屏幕分辨率的宽："+ window.screen.width;

s += "
屏幕可用工作区高度："+ window.screen.availHeight;

s += "
屏幕可用工作区宽度："+ window.screen.availWidth;

s += "
你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";

s += "
你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";

document.write(s);

CSS 使用Sprites技术实现圆角效果

首先来简单说一下什么是Sprites，Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当

《CSS3实战》笔记--渐变设计(一)

基于CSS的渐变与图片渐变相比，最大的优点是便于修改，同时支持无级缩放，过渡更加自然。目前，实现CSS渐变的只有基于Webkit和Gecko引擎的浏览器，基

《CSS3实战》笔记--渐变设计(二)

Gecko引擎的CSS渐变设计直线渐变基本语法-moz-linear-gradient([point||angle,]stop,stop[,stop]*)参数说明：point:定义渐变起始点，取值包含数值，百分比，也可以使用