移动端页面开发的两种方式

时间 2019-12-09

标签移动页面开发两种方式栏目无线繁體版

原文原文链接

以前一直作的是web端，换工做以后重心变成了移动端，尝试几回以后总结了两种移动端页面的开发模式，能够自适应各类屏幕大小。但愿对你们有所帮助。\(▔＾▔)/css

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

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


在网页的<head>中增长这句话，可让网页的宽度自动适应手机屏幕的宽度。

width=device-width ：表示宽度是设备屏幕的宽度 
initial-scale=1：表示初始的缩放比例 
minimum-scale=1：表示最小的缩放比例 
maximum-scale=1：表示最大的缩放比例 
user-scalable=no：表示用户是否能够调整缩放比例

利用这种方法来使网页自适应手机屏幕以后，在页面布局中，css定义宽度的时候最好不要使用具体的值（例如xx px），而是应该使用百分比。ios

例如：web

就拿这个页面中间的表格来讲：服务器

最外层div是90%，居中，给两边留了边距。里面的表格相比于div宽度是100%，表格每行的第一个单元格是表格宽度的30%。布局

这样设置以后，无论移动设备有多大，表格都会随着移动设备的宽度变化而增大/缩小，在每一个设备上看到的效果都是同样的。字体

须要注意的是：这种方法下定义字体大小的时候，尽可能使用 em 或者 rem ，而不要使用 px 。 px 并不会随着屏幕大小的变化而变化。spa

2、使用js对网页进行缩放

这种方法与第一种方法不一样的是：在开发过程当中，彻底不用考虑适配问题，不用使用百分比，甚至字体能够直接使用px。这种方法是利用一段js代码来对网页进行等比缩放，能够直接将页面宽度写死，而后根据 固定宽度 进行开发。scala

首先将下面这段js代码放在要开发的页面中。设计

1 function bodyScale() { 2     var devicewidth = document.documentElement.clientWidth; 3     var scale = devicewidth / 640; 4     document.body.style.zoom = scale; 5 } 6 window.onload = window.onresize = function () { 7  bodyScale(); 8 };

我公司的设计师通常给的设计稿是640的，因此我上面的代码基数是640，在开发过程当中也是以640px的标准来开发的。若是设计师给的设计稿是其余尺寸的，这里作出相应的改变便可，没有很大的影响。

一、最外层div，我直接固定宽度 640px 。

（须要注意的是，body后面的style="zoom:1.53125;"并非我写上去的，这是由那段js代码生成的。能够直接忽略它。）

二、图上面的表单，也是直接使用固定的宽度

label：

input：

(label) 90px + (input) 470px + (左边距) 40px + (右边距) 40px = 640px 刚恰好640px。

这种方式比较简单，不用动脑，一段js代码就搞定了。固然适配效果也很好，这里就不贴图了，demo已上传服务器。

线上demo （纯静态页面）

！！！须要注意的是，两种方法不能混用。

以前开发的时候粗枝大叶，在使用第二种方法中的js以后，head标签里仍然写了第一种方法里的那段meta代码。开发出来的页面在安卓上没有任何问题，可是在ios上查看的时候，页面上字体大小会乱掉。以下：

安卓：

ios：