JavaScript代码让手机自适应

# 技术杂谈 2017-08-11 20:43 0 1,831 来源：海墨

这里给大家分享的是用JavaScript代码让手机自适应。

一般前端技术人员会在html里采用这种方法：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <!-- 手机自适应代码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale =1.0,maximum-scale =1.0">
</head>
<body>

</body>
</html>

对于这段代码大家都知道:

width = device-width    // 网页宽度默认等于屏幕宽度
initial-scale = 1.0    // 原始缩放比例
minimum-scale = 1.0    // 最小缩放比例
maximum-scale = 1.0    // 最大缩放比例
user-scalable = no    // 保证页面不可以缩放

这里我给出的是JavaScript代码：

<script>
       var width = window.screen.width;   //屏幕分辨率的宽度
       var wid= width/525;         //525为页面实际宽度

       var content = 'width=device-width,initial-scale='+wid+', minimum-scale=1.0, maximum-scale=1.0, user-scalable=no';

       var meta = document.createElement('meta');

       meta.setAttribute('name','viewport');
       meta.setAttribute('content',content);

       document.getElementsByTagName('head')[0].appendChild(meta);
</script>

PS：

user-scalable=no; 对于有些浏览器而言就不一定保证页面缩放，同时使用minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0即可。
initial-scale=1.0; 对于有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。
手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才
可以保证页面不能移动。
如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。