移动端网站开发要点

Head标签中要点

【手机端特有】

标注作者

在浏览器中页面将以原始大小显示,并不允许缩放

width:viewport的宽度(范围从200到10,000,默认为980像素)
height:viewport的高度(范围从223到10,000)
initial-scale:初始的缩放比例(范围从>0到10)
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩放

在浏览器中页面中出现的手机号码将不以拨号的超链接的形式出现,在iphone中默认以超链接形式出现(无需添加)

不识别页面中出现的邮箱

/

开启页面对webapp程序的支持,一开始不需要添加

在webapp应用下状态条(屏幕顶部条)的颜色,默认default为白色,可以定义为黑色black和灰色半透明black-translucent。

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

【苹果web app持有】

"添加到主屏幕“后,全屏显示(完全不明白,可以添加)

删除默认的苹果工具栏和菜单栏,默认是显示(无需添加)

在用户把网页存为书签时,在手机HOME界面创建应用程序样式的图标,换句话就是:这个link就是设置webapp的放置主屏幕上icon文件路径

//IOS

//Android

注意:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录

设置启动时的界面显示的图片

注意:该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
官方规定启动界面的尺寸必须为320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。

【几个网站例子】

红岭创投

值得信赖的P2P网络借贷平台_红岭创投











天猫

天猫触屏版 
     
             
     
     
     

淘宝

淘宝网触屏版











京东

 京东 - 手机版 



网易

手机网易网




百度




你可能感兴趣的:(移动端网站开发要点)