移动端适配难点

Posted hanhaihu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端适配难点相关的知识,希望对你有一定的参考价值。

1.移动端开发通常都会在html中写下以下的meta标签

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

需要注意的是无论是这样写还是用淘宝flexible.js动态生成meta头,目的只有一个,那就是让布局视口等于苹果手机的分辨率宽高/设备像素比后的宽高。苹果手机的分辨率是指以下所示

技术分享图片

 

而不是以点位计算的以下单位,技术分享图片

不要被误解。

以苹果5s为例,当设置以上meta标签时,手机的布局视口为320px*568px。这时只要再写好rem适配逻辑,会自动的适配到320px视口下的基准font-size,从而实现适配目的;

 

 

2.移动端适配,其实就做两件事,一是设置布局视口等于手机的device-with(其实就是分辨率宽高/设备像素比的宽高,同时也是以点位表示的设备宽高)。二用rem单位做适配。这两件事是独立的两件事,不要混淆;

以上只是自己的理解。

 

以上是关于移动端适配难点的主要内容,如果未能解决你的问题,请参考以下文章

前端开发——移动端及响应式布局解决办法总结(适配)

前端开发——移动端及响应式布局解决办法总结(适配)

移动端适配

前端移动端适配 - 媒体查询适配方案

逐帧动画抖动适配布局SVG Sprites

前端移动端适配 - 媒体查询适配方案