0

基本问题：

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

原因：

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

超过 1200 像素 1025 像素到 1199 像素 980 像素到 1024 像素 768 像素到 979 像素

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

为此，我可以轻松使用：

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

唯一的问题是它覆盖了为 iPad 横向设计的 980px 到 1024px @media 查询，并强制 iPad Landscape 显示我为 iPad Portrait 设计的较小布局，即 768px 到 979px 布局。

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

4

1 回答 1

2

繁荣！固定的！

是的，这浪费了 6 个小时，但它已经完成并且现在可以工作了，希望这对某人有所帮助！

首先，我在 functions.php 文件中包含了一个非常标准的 Viewport Meta Tag：

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

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

    <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 横向和纵​​向保留了我漂亮的响应式布局，并为手机提供了一个不错的视口大小。迷人的

于 2013-08-07T14:05:43.843 回答