Network: 让网页页面宽度自适应屏幕宽度

作为一个程序员的博客,必然会引用很多的代码块,为了尽可能让代码块不至于太乱,于是就考虑将页面的最小宽度设置为768px。在桌面版本并不会有太大的问题,但在移动设备(Android手机)上用Chrome浏览时,页面总是超出屏幕很多,使得你每一次打开页面都得进行缩放的操作。于是考虑用viewport来解决:设置initial-scale来解决。

 

  • 关于viewport:

在html->head->meta中定义,可以设置content的width和initial-scale, maximum-scale, minimum-scale等等。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
</head>

Nexus 4上viewport中的”device-width”到底有多大呢,可以用window.innerWidth来获取:

<body>
    <script type="text/javascript">
        document.write("device-width=" + window.innerWidth);
    </script>
</body
  • 用java script重新设置viewport
    <script type="text/javascript">
        function br_update_meta_viewport() {
            var brWebMinWidth = 783; // The minimum width of the page
            var brWinWidth = 0;
            if (screen.availWidth) {
                brWinWidth = screen.availWidth;
            }

            if (brWinWidth == 0 || brWinWidth > brWebMinWidth) {
                return;
            }

            var brScale = brWinWidth / brWebMinWidth;
            var metaContent = "width=" + brWinWidth + ", initial-scale=" + brScale;
            var metaElements = document.getElementsByTagName('meta');
            for (var i = 0; i < metaElements.length; i++) {
                var meta = metaElements[i];
                if (meta.getAttribute('name') == "viewport") {
                    if (meta.getAttribute('content') == metaContent) {
                        break;
                    }
                    meta.setAttribute('content', metaContent);
                    break;
                }
            }
        }
        window.addEventListener('resize', br_update_meta_viewport);

        br_update_meta_viewport();
    </script>

NOTE:

使用这个java script还是不能解决这个问题,明天再看看怎么改进。

原来,我所需要的效果只需要将html->head->meta中的定义删除,同时指定html->body的min-width为768px就行了。先暂时这样了。

参考文档:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

评论

Be the First to Comment!

提醒我
avatar

wpDiscuz