html5移动端开发部分总结

1.移动端开发视窗口的添加

h5 端开发下面这段话是必须配置的

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

其它相关配置内容如下:

  • width viewport 宽度(数值/device-width)

  • height viewport 高度(数值/device-height)

  • initial-scale 初始缩放比例

  • maximum-scale 最大缩放比例

  • minimum-scale 最小缩放比例

  • user-scalable 是否允许用户缩放(yes/no)

  • minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。

2.媒体查询的改进

之前在做移动端开发的时候,为了适配多屏幕,使用的是rem 单位。

这个时候就需要根据屏幕的尺寸来动态的设置根节点 html 的 font-size 值;这样可以解决多屏幕适配的问题。

比如下面的 媒体查询代码:

html {    //iphone5
    font-size: 62.5%;
}
@media (max-width: 414px) {
    html {    //iphone6+
        font-size: 80.85%;
    }
}
@media (max-width: 375px) {
    html {    //iphone6
        font-size: 73.24%;
    }
}

这样做的结果,有两个很明显的缺点。

  • 适配屏幕的尺寸不是连续的。

  • 在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

后来参考淘宝移动端页面适配规则,使用 js 获取客户端的宽度,根据设计稿的原型动态的计算 font-size 的值。

详细的内容请看这里: 根据iPhone6设计稿动态计算rem值

3.a标签内容语义化

大多数时候我们都会给一片区域加上点击跳转的功能。如下图:

1.png

原文链接:HelloWeb前端网 » html5移动端开发部分总结 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享