简单的移动开发技巧

最新推荐文章于 2025-05-23 01:35:18 发布

转载最新推荐文章于 2025-05-23 01:35:18 发布 · 250 阅读

两种简单的移动开发的技巧，可以让你快速上手移动端项目，适配各种屏幕大小。

一、使用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），而是应该使用百分比。

需要特别注意的是：这种方法的字体大小要使用em或者rem，使用px就不会随着屏幕大小的变化而变化。

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

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

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

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

另外，这两种方法不要同时使用，比如用了第二种后，在用百分比布局，有时候你的布局会乱掉，切记切记。