手机端前端开发实践

 1.横竖版可以重置缩放，但无法手动缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>

2.横竖版不可以重置缩放，可以收到缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1"/>

3.页面初始化时，需要定制以下这几个viewport属性

width=device-width
user-scalable=1
initial-scale=1
maximum-scale=1
minimum-scale=1

4.其他定制

   快捷方式打开时全屏显示
   隐藏状态栏，在设计app UI时可以考虑状态栏高度为20像素左右
   iPHONE会将看来像电话号码的数字添加电话连接，需要关闭

 

apple-mobile-web-app-capable:yes
apple-mobile-web-app-status-bar-style:blank
format-detection:telephone=no

  用法：

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

5.图片定制

<link rel="apple-touch-icon" sizes="57x57" href="icon1.png" />

6.字体设置

 

body{
	font-family:"tohoma,arial,\5b8b\4f53,sans-serif";
}

7.字体缩放设置（横版竖版切换的缩放）

html {
	-webkit-text-size-adjust:100%;
}

8.slide组件的使用