Question

基本问题：

有没有我可以将视口元标记设置为仅在768px及以下生效？

原因：

我使用标准的@media浏览器尺寸构建了一个响应式电子商务网站：

超过1200px 1025px到1199px 980px到1024px 768px到979px

由于网站的复杂性，它不可行，时间或布局明智，因为我使用@media查询使网站可用于移动浏览器，所以我想使用视口元标记强制所有小型移动设备浏览器显示768px到979px的布局。

要做到这一点，我可以轻松使用：

<meta name="viewport" content="width=768px; />

唯一的问题是它超越了专为iPad版设计的980px到1024px @media查询，并迫使iPad Landscape显示我为iPad Portrait设计的较小布局，即768px到979px布局。

我祈祷的答案是，如果我可以将视口元标记设置为仅在768px及以下生效 - 这可能吗？

Answer 1

<强> BOOM！ FIXED！

是的，这是一个6小时的悲惨浪费，但现在已经完成并正在工作，希望这有助于某人！

首先，我在functions.php文件中包含了一个非常标准的视口元标记：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.2, user-scalable=yes" />

然后我在header.php中使用了jQuery Mobile来查看浏览器宽度，如果浏览器宽度低于700px，则将视口大小更改为768px：

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>

    <meta name="viewport" content="">

    <script>
        if($.mobile.media("screen and (max-device-width: 700px)")) {
            // Change viewport for smaller devices
            $('meta[name=viewport]').attr('content','width=768px');
        }
    </script>

这非常有效 - 它为iPad Landscape和Portrait保留了漂亮，响应迅速的布局，并为手机提供了一个很好的视口大小。可爱

是否可以仅在768px及以下的地方调用Viewport Meta标签？

1 个答案: