WEBAPP或html手机网站经验摘要

《WEBAPP或html手机网站经验摘要》要点：
本文介绍了WEBAPP或html手机网站经验摘要，希望对您有用。如果有疑问，可以联系我们。

相关主题：html5和webapp

手机网站的开发，通常要么使用自适应模板，要么单独为手机开发一套模板。如果使用VEPHP框架，可以自动判断访问终端，从而调用不同的模板。有两种情形，一种是您没有设置移动端模板，那么VEPHP仍然使用PC端模板，这时通常用于自适应模板。如果您设置了移动端模板，则会自动调用移动端的。因此，使用VEPHP很好处理移动站。

在设计移动端的手机站或WEBAPP的模板时，掌握注意以下几点能帮你很好设计出手机站：

1、手机网站的宽度：

手机站的图片要做成600px-650px宽（取决于你的网站宽度上限），或使用740px宽，但这比较少，常见的腾讯等知名网站都是使用640px左右的宽度。并且，页面设置成width:100%。必须在外围容器如div加上：

    margin: 0 auto;

    max-width: 640px;

 
建议640，因为iphone4和5最低就是640px。如下：

注. iphone 各机型： 

2、允许网页宽度自动调整：

首先，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

这个有两个作用：
A、让网页不会显的很小。
B、不会在点击表单元素后，在IOS上自动放大网页（后面maximum-scale=1.0, user-scalable=0起作用）。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

3、不使用绝对宽度：只能指定百分比宽度：width: xx%;

4、【重要】图片要指定CSS：img{max-width: 100%;}

5、如果您的网页所用框架没有自动判断功能，需要在前端页面加入JS判断浏览器是不是移动端，如是则跳转到移动端，当然，如果是自适应页，也不必跳转。

6、对于IOS，防止在iOS设备中的Safari将数字识别为电话号码：Safari总会把长串数字识别为电话号码，文字变成蓝色或绿色，点击还会弹出菜单添加到通讯录。safari有个私有meta属性可以解决这个问题：
 <meta name="format-detection" content="telephone=no" /> 

7、如果一个PC端的网页有对应的手机页面，可以在PC端页面加入meta http-equiv="mobile-agent"，如：

<meta name="mobile-agent" content="format=html5;url=http://www.vephp.com/jiaocheng/1.html">

或者

<meta http-equiv="mobile-agent" content="format=html5;url=http://www.vephp.com/jiaocheng/1.html">

建议前者。
这将有助于百度在移动搜索中将原PC页结果替换为对应的手机页结果。积极的参与“开放适配”，将有助于您的手机站在百度移动搜索获得更好的展现，同时以更佳的浏览效果赢取用户口碑。当然，如果您使用VEPHP框架，则不必设置此项。

Meta声明的格式： <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">

注：
A. 红色字体部分是需要站点自定义的内容。[wml|xhtml|html5]——根据手机页的协议语言，选择中的一种。

url=url ——后者代表当前PC页所对应的手机页url，两者必须是一一对应关系（而不是统一对应至手机站首页）

B. name="mobile-agent"为更新后的meta声明，建议使用。原有meta规则http-equiv="mobile-agent"能够兼容并继续生效，已标注过的无需修改。

8、还可以制作图标，可以在iPhone/iPod Touch上将网页"添加至主屏幕"时，去掉icon上那恶心的透明层,以知乎站为例：

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(57px).png" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(72px).png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(76px).png" sizes="76x76" />
<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(114px).png" sizes="114x114" />

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(120px).png" sizes="120x120" />

<link rel="apple-touch-icon-precomposed" href="http://static.zhihu.com/static/img/ios/zhihu(152px).png" sizes="152x152" />

9、其它常用META：

<meta content="yes" name="apple-mobile-web-app-capable"/>  

<meta content="black" name="apple-mobile-web-app-status-bar-style">

说明：

1、是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

2、也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式（以app模式启动时才起作用，设置顶部系统栏的样式，content有三个取值：default白色、black黑色、black-translucent灰色半透明。）：

注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）

10、预加载：

HTML5预加载标签 

<!-- 页面，可以使用绝对或者相对路径 --> 

<link rel="prefetch" href="page2.html" /> 

<!-- 图片，也可以是其他类型的文件 --> 

<link rel="prefetch" href="sprite.png" /> 

备注： https 协议也同样支持。 

何时需要预加载？

网站是否采用预加载取决于你的需求，下面是一些建议： 

- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面. 

- 加载网站内部通用的图片 

- 在搜索结果页预加载下一页 

转载请注明本页网址：
http://www.vephp.com/jiaocheng/1.html