今天拿到的需求:pad版本的页面在手机上要适配,我真是一口老血

最快的方法是缩放页面,核心问题: js动态控制html页面缩放

搜到别人写的

js控制页面缩放_江-月*夜的博客-CSDN博客_js 控制缩放

      <script language="javascript">
        document.write('<meta name="viewport" content="width=1280, minimum-scale = ' + window.screen.width/1280+', maximum-scale = '+window.screen.width / 1280 + ', target-densitydpi=device-dpi, user-scalable=0">');
      </script>

<meta>标签 name=“viewport“ 详解_青颜的天空的博客-CSDN博客_name=viewport

1、使用name = "viewport",里面的width=device-width, initial-scale=1, maximum-scale=1

表示页面宽度是设备宽度,最大缩放是1,直接设置原本的UI宽度,动态计算缩放比例

2、user-scalable=0;禁止用户自动缩放

3、target-densitydpi=device-dpi;HTML5中Viewport的参数介绍以及使用方法-木庄网络博客

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐