微信屏幕宽度自适应

最新推荐文章于 2024-06-13 17:37:58 发布

dragoo1

最新推荐文章于 2024-06-13 17:37:58 发布

阅读量6.1k

点赞数

分类专栏： javascript 文章标签： html5 微信自适应 viewport 拖动

本文链接：https://blog.csdn.net/dragoo1/article/details/51205900

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

环境：硬件)iphone5s,SAMSUNG SM-T810+Android 5.0.2; 软件) 微信 WeChat6.3.13;

问题：使用类似于<meta name="viewport" content="width=595, height=841" />这样的标签在air2,pad2效果很好，但是跑到iphone5s会有滚动条，左右可以拖动，被老大要求调整为不可拖动的。

解决：

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" id="webviewport" content="width=595, height=841" userwidth="595" userheight="841" />
    <script type="text/javascript">
        adjustWidth();
        window.addEventListener("onorientationchange" in window ? "orientationchange" : adjustWidth, adjustWidth, false);
        function adjustWidth() {
            var viewport = document.getElementById('webviewport');
            var userWidth = parseInt(viewport.getAttribute('userWidth'));
            var userHeight = parseInt(viewport.getAttribute('userHeight')W);
            if (window.orientation == 180 || window.orientation == 0) {
                //document.write("手机竖屏状态！");
                if (window.devicePixelRatio * screen.width < userWidth) {//设备分辨率(宽)不足
                    if (userWidth < 312.5) {//微信
                        viewport.setAttribute('content', 'width=device-width,initial-scale=1');
                    }
                    else if (userWidth >= 312.5 && userWidth < 1274) {
                        viewport.setAttribute('content', 'width=device-width,initial-scale=' + (305 / userWidth)); //index.html
                    }
                }
                else {
                }
            }
            if (window.orientation == 90 || window.orientation == -90) {
                //document.write("手机横屏状态！");
                viewport.setAttribute('content', 'width=' + userWidth + ',height=' + userHeight);
            }
        } 
    </script>
</head>
<body style="width: 595px; height: 841px; background-color: #ff0000">
</body>
</html>

html刚入门，如有问题，望指出

参考：http://www.cnblogs.com/2050/p/3877280.html

http://www.cnblogs.com/hejia/p/4123592.html

dragoo1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信屏幕宽度自适应

环境：硬件)iphone5s,SAMSUNG SM-T810+Android 5.0.2; 软件) 微信 WeChat6.3.13;问题：使用类似于这样的标签在air2,pad2效果很好，但是跑到iphone5s会有滚动条，左右可以拖动，被老大要求调整为不可拖动的。解决： adjustWidth(); window.add
复制链接

扫一扫