JavaScript手机自适应代码

最新推荐文章于 2025-06-13 14:39:59 发布

原创最新推荐文章于 2025-06-13 14:39:59 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #响应式 #手机网页

javascript 同时被 3 个专栏收录

3 篇文章

订阅专栏

html5

3 篇文章

订阅专栏

响应式

1 篇文章

订阅专栏

本文探讨了如何使用JavaScript确保手机网页自适应，包括设置user-scalable=no, minimum-scale=1.0, maximum-scale=1.0以限制页面缩放，并分析了initial-scale与user-scalable的关系。同时，介绍了如何阻止页面在文本框激活时自动放大，以保持页面适应屏幕宽度。" 112438984,10535830,Python OpenCV 实现图像仿射变换,"['图像处理', 'OpenCV', 'Python', '计算机视觉', '图像变换']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>

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

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

       var content = 'width=device-width,initial-scale='+w
           +', minimum-scale=0.3, maximum-scale=2, user-scalable=no';

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

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

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

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