手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应
Posted www.84ren.com返利网
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应相关的知识，希望对你有一定的参考价值。
转自 http://my.oschina.net/cart/blog/282477
做前端开发不短了，用过jQuery Mobile jqMobi 也纯手工写过。。
最后总结如下：
jQuery Mobile：适合大而全，兼容性高，功能全，但是文件大，略显臃肿。。如果你是网页版、手机版共用jquery库等 适合使用jQuery Mobile。
jqMobi：适合单独就是手机版的站，体积小，速度快，但是兼容性没有jQuery Mobile好，功能没有jQuery Mobile全，但是一般也够用啦。
不过，如果你是简单的小功能手机版的话，杀鸡焉用牛刀啊，自己手写即可。
手机版网站要注意，结构形如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />
<link rel="dns-prefetch" href="//baidu.com"/>
<title>======</title>
</head>
<body>
</body>
</html>手机版 一定要带上
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />其中如果你网站需要多个二级域名CDN，特别推荐以下代码：
<link rel="dns-prefetch" href="//baidu.com"/>使用了浏览器DNS预读功能，大大加速你网站DNS解析的速度，强烈推荐使用。
网站开发使用像素，还是百分比？
使用像素设计网站：
网站开发使用像素优点
一般手机版以320PX来设计你的手机版即可，使用像素有个好处就是在任何设备上，表现出来的效果更能保持你设计出来的原汁原味，不会出现“意外”效果。
网站开发使用像素缺点
多种设备不能够智能自适应。
使用百分比设计网站：
网站开发使用百分比优点
不同设备可以自适应，基本都很漂亮
网站开发使用百分比缺点
不同设备，万一有一种设备的宽度不是你预料的，自适应等会“意外”的掉下来，不美观，开发、测试难度略大。
最后，做个总结：
- 时间充裕的话，建议使用百分比来设计你的手机版网站。
- 资源紧张，时间急促，人力有限，水平一般的话，建议还是老老实实的使用像素，宽度为320PX来设计你的手机版网站吧。
手机移动端网站设计完美解决方案
Bootstrap
viewport百科解析、viewport是什么、viewport作用、移动版自适应、手机版网站自适应
| <meta name="viewport" |
| content=" |
| 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] |
| " |
| /> |
width
控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
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之间。
| <!-- html document --> |
| <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
初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。
例：
- <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"/>(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)
以上是关于手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应的主要内容，如果未能解决你的问题，请参考以下文章