html5在移动端的屏幕自适应性问题_html5_ThinkSAAS
html5在移动端的屏幕自适应性问题
html5在移动端的屏幕自适应性问题
在 html5这里我们可以更好的解决这项问题。手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口” （viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网 页的不同部分。常用的viewport布局为：&meta name="viewport" content="width=device-width,user-scalable=no" /&具体的含义是：width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素），默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。height：和 width 相对应，指定高度。target- densitydpi：一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度， 中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。
下面是 target-densitydpi 属性的 取值范围
device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
&value& – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
&meta name="viewport" content="target-densitydpi=device-dpi" /&&meta name="viewport" content="target-densitydpi=high-dpi" /&&meta name="viewport" content="target-densitydpi=medium-dpi" /&&meta name="viewport" content="target-densitydpi=low-dpi" /&&meta name="viewport" content="target-densitydpi=200" /&
为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的 width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。maximum-scale：允许用户缩放到的最大比例，范围从0到10.0。minimum-scale：允许用户缩放到的最小比例，范围从0到10.0。user-scalable：用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、false不允许用户缩放，如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。。所有的缩放值都必须在0.01–10的范围之内。将这些属性设置之后放入html5 的meta属性中，即可对手机屏幕进行适应，例：[mw_shl_code=xhtml,true]&meta name="viewport"
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"/&[/mw_shl_code]下面是两个实际使用的例子：
(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
&meta name="viewport" content="width=device-width,user-scalable=no" /&
(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
&meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信自适应网页设计近来很流行，如果你接触比较少请参见 。当然，对一个新手来说可能听起来有点复杂，其实它比你想象的简单多了。这里是一个快速教程，通过学习你会自适应网页和media queries的基本原理（前提你有css基础）。
Step 1：Meta 标签
为了适应屏幕，不少移动浏览器都会把HTML页面置于较大视口宽度（一般会大于屏幕宽度），你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：
&meta name="viewport" content="width=device-width, initial-scale=1.0"&
IE8及其更低版本不支持media query，可以使用或脚本实现支持。
&!--[if lt IE 9]&&script src="http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js"&&/script& &![endif]--&
Step 2. HTML结构
在这个例子中，页面布局包括 header，content，sidebar和
footer。header固定高度为180px，content宽600px，sidebar宽300px。
Step 3. Media Queries
是自适应网页设计的关键，他就像高级语言里的if条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。
如果视口宽度小于等于980px，下面规则生效。
这里将容器绝对宽度改用百分比显示，让页面排版更加灵活。
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap{
width: 94%;
width: 65%;
width: 30%;
如果视口宽度小于等于700px， 将#content和#sidebar宽度设为自动(auto)，并移除它的浮动属性(float)，这样它会变成满版显示。
/* for 700px or less */
@media screen and (max-width:700px) {
#content {
#sidebar {
当视口宽度小于等于480px时（如手机屏幕），将#header高度设为自动，h1的字体大小设定为24px，并隐藏#sidebar。
/* for 480px or less */
@media screen and (max-width:480px) {
font-size: 24
#sidebar {
根据你的喜好，可以定义更多的media queriey条件
这里只是一个快速教程，更多可以参见
原文来源：
本文链接：因为web app跨平台的特性，决定着自适应方案在整个项目的重要性。
特别对于Android众多分辨率和屏幕尺寸的机器群，找到合适通用的解决方案显得尤为重要
1.页面大小
有没有遇到过一个情况？在iphone 4机器上开发时，明明分辨率是960*640，我们写一个320px的容器，竟然占满了屏幕宽；显示一张100*100的图片，会出现模糊失真，必须把图片的宽高都缩小一倍，变成50*50才会正常。
导致上面情况的原因是什么呢？这和新的度量单位DPI有关
（1）PPI/DPI
PPI，有时也叫DPI，所表示的是每英寸所拥有的像素数目，数值越高，即代表显示屏能够以越高的密度显示图像。计算PPI的方法我借鉴了一些文章的图片。
我们需要首先算出手机屏幕的对角线等效像素，然后处以对角线（我们平常所说的手机屏幕尺寸就是说的手机屏幕对角线的长度），就可以得到PPI了。
（2）px和像素的区别
首先我们需要明确一点，等值的CSS里面的px在手机屏幕上占多大的位置，这不是固定的，还要取决于屏幕的DPI。因为手机会根据DPI，对页面进行自动 缩放来协调屏幕像素和尺寸之间的显示效果。我们计算PPI就是为了知道一部手机设备是属于哪个密度区间的，因为不同的密度区间，对应着不同的默认缩放比 例，这是一个很重要的概念。
可以看到，iphone 4的DPI是330，属于xhdpi，默认缩放比例为2，这意味着1个css px实际上是显示了两个像素点，那么一个320px的容器占满屏幕的情况就可以理解了，而图片的显示，因为在photoshop内表示图片的 100*100像素是和屏幕像素对应的，那么在页面内使用100px大小显示图片，情况就相当于在photoshop内将图片放大一倍的效果，模糊、失真 是肯定的。
这个缩放比例影响了什么？它让我们开发的时候，考虑的页面大小并非简单的等于屏幕分辨率，而应该是：
页面大小 = 分辨率/DPI
举些例子：
IPHONE 4 [640*960]/2 = [320*480] &
HTC G11 &[480*800]/1.5 = [320*533]
（3）DPI题外话
对于不同的DPI为什么要进行比例缩放，我的理解是这样的：在超高DPI的机器上，意味着在仅有的屏幕尺寸上要分布着几十万个像素点，假如css px和手机像素是1:1的关系，我们在页面上一个16px的字体，在手机屏幕上看可能就和一粒米一样，所以在高清屏幕上，迫不得而必须把页面比例放大让内 容不至于太小看不清。
现在许多Android追求大屏幕，但是在分辨率不变的前提下，加大屏幕只是让显示的内容更大，并不会更清晰细腻。
乔布斯在2010年提出一个概念：&当你所拿的东西距离你10-12英寸（约25-30厘米）时，它的分辨率只要达到300dpi这个&神奇数字&（每英 寸300个像素点）以上，你的视网膜就无法分辨出像素点了。&，这也是为什么苹果的手机屏幕叫作视网膜屏（retina）
（4）市场占有率
我主要分析apple和android两大阵营。apple来说，从iphone4和itouch4开始使用视网膜屏，而现在使用iphone4以下设备的应该不超过市场的10%，所以统一针对&640*960 DPI为330的页面就行了。
而android情况要多很多，根据图1，hdpi占了一半，而xhdpi和mdpi占4分1，ldpi可以忽略
阅读(...) 评论() &标签： , , , , , , , , ,
赞助商广告()：
如果你月薪不足20K，不妨
如果你有1~3年前端开发经验，不妨
听说、你想学JS？不妨
发表评论（目前34 条评论）
热门总排行需求发布后1小时内收到服务商响应每个需求平均有10个服务商参与95%以上的需求得到了圆满解决所有需求不向雇主收取任何佣金1元做营销
一个手机自适应html5页面的制作
有相似问题想解决?专业顾问来帮助您
发布需求, 托管赏金
匹配服务商
选择服务商，签单
服务商工作
验收并付款
已投标服务商
综合评分：5颗星
速度：5.00
服务：5.00
态度：5.00
好评率：100%
共有1个服务商参与报价，查看更多服务商报价
参与报价,开始赚钱
提交你的报价和方案
中标后交付作品
获得任务赏金
极速：10分钟急速响应
高品质：精选服务商提供服务
放心：不满意可退款
交易成功的需求
前端开发相关需求