移动端适配

移动端适配

使用的浏览器：Google；
验证的编译软件：HBuilder、Sublime text3、Webstorm；

为了方便观察和修改，使用的是纯静态网页；修改好后动态网页也是同样适用
初始pc端页面如下图所示

HBuilder上进行不同视窗的验证查看
ios看到的页面是：

ipad上看到的页面是：

可见，以上两种页面，都需要手动向左滑动，才能看到完整的页面；

Android上看到的页面是：

可见，安卓系统上不用手动滑动，但是还是与pc端使用相同的比例，在手机上浏览的话，就不得不手动进行放大，才能达到好的视觉效果，并且右侧有大面积区域是留白的；

为了解决这些手机端的不适配问题，下面有两种方法可借鉴：

1. 使用meta标签，使网页宽度自适应手机屏幕

在网页的 head 之中添加 meta 标签;

<meta name="viewport" content="width=device-width initival-scale=1.0 maximum-scale=1.0 user-scalable=no">

其中name=“viewport”（窗口）
width：控制 viewport 的大小，可以指定的一个值，如 600px，或者特殊的值；如 device-width ：为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。还可以添加height；
initial-scale=1.0 ：确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

添加后的效果如下
ios效果图

ipad效果图

图片和文字的排版自动换行，右侧的留白自适应了宽度后视图更好看，内容完整，并且不需要向左滑动手机；适配成功；

Android（安卓手机截图）效果图

同样达到了效果；

2.添加一段js代码，对页面进行缩放

<script>    function bodyScale(){        var devicewidth=document.documentElement.clientWidth;        var Scale=devicewidth/640;        document.body.style.zoom=Scale;    }    window.onload=window.onresize=function(){        bodyScale();    };</script>

对上面的640进行修改，会有不同的效果，例如，当var Scale=devicewidth/1200;时，pc端页面如下：

当var Scale=devicewidth/640;时，pc端：

问题：这个方法，总是会存在缩放的问题，可能还是没有弄懂那个640是根据什么来定义的；

注意

当两种方法混合使用时
ios：

ipad：

Android（安卓手机截图）：

此时var Scale=devicewidth/640;使用的是640；
个人感觉依然可以达到适配的效果，但是字体会变小一点（一个屏幕内能容纳的东西变多了），也就是比例变小了；

总结

个人认为，第一个方法能自动适应屏幕大小，比较好用，第二个方法只是在改变缩放比例，以此来适应屏幕，可能还是不够准确；