移动端开发要点

一、移动端布局：

1 纯粹的移动端，不需要考虑任何的pc上的展示效果

A 百分比  （不推荐使用）

B  rem（荐）

C  viewpoint（荐）

D 无宽布局（不是说永远都不给宽度）

2 响应式（一套网站，兼容N多设备）

 

 

Viewport（可视区尺寸）

例子：<meta name=”viewport” content=””>

 

二、Content 参数

Width - viewport宽度（数值/device-width）

也可以是具体的数值

Height - viewport高度（数值/device-height）

Initial-scale ：初始缩放比例

任意值

user-scalable：是否允许用户缩放（yes/no） | （0/1）

Maximum-scale：最大缩放比例

Minimum-scale：最小缩放比例

 

三、IOS专用

添加到主屏的标题：<meta name=”apple-mobile-web-app-title” content=”添加到主屏的标题”>

添加主屏后的图表：<link rel=”apple-touch-icon-precomposed” href=”b.png”>

是否启用app全屏模式：<meta name=”apple-mobile-web-app-capable” content=”yes/no”>

禁止数字自动设置为电话号码：<meta name=”format-detection” content=”telephone=no”>

链接按住点击后会出现背景黑色的解决方法：在css样式中加入：

-webkit-tap-hightlight-color:transparent;

禁用iphone中safari的字号自动调整,在css样式中：

Html{-webkit-text-size-adjust:none;}

四、REM

rem： root the element 相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

vw ： view width 根据可视窗的比例（比如width：10vw就是10%的可视窗宽度）

vh ： view height 根据可视窗的比例（长度）

Vmax：最大

Vmin：取宽或高最小的部分