当前位置：文江博客话题详情

如何设置仅适用于 iPhone 或 iPad 的视口？

发布于 2024-10-14 05:16:30 字数 90 浏览 4 评论 0原文

我有一个网站，需要在 iphone 上使用 0.3 的视口值，但在 ipad 上使用 0.7。

有没有办法只为 iPhone 或 iPad 设置视口？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

折戟 2024-10-21 05:16:30

这是一种解决方案...

<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

Here is one solution...

<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

回复收藏 0 原文

只等公子 2024-10-21 05:16:30

我用 jQuery 找到了一个简单的方法！

将其添加到标记：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>

标记设置默认比例，

我在任何地方都找不到简单的解决方案，所以我想出了这个:)

I found a simple way with jQuery!

Add this to the <head> tag:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>

The <meta> tag sets the default scale and the <script> tag re-writes the viewport if the device screen width is less than 600 pixels (I think all phone devices are under 600px).

I could not find a simple solution anywhere so I came up with this :)

回复收藏 0 原文

牵你的手，一向走下去 2024-10-21 05:16:30

请注意，meta viewport 是逗号分隔的列表，不应使用分号。

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

来源：
Apple 文档中的视口语法和
配置视口 - Apple 文章

（如果我有更多声誉点，我会将其添加为评论）

Please note, meta viewport is comma-delimited list, you should not use semicolons.

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

Source:
viewport syntax in Apple's documentation and
Configuring the Viewport – Apple article

(If I had more reputation points, I would add this as a comment)

回复收藏 0 原文

两人的回忆 2024-10-21 05:16:30

对于所有移动设备，请尝试这样的操作。

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>

For all mobile devices, try something like this.

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|ipod|android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>

回复收藏 0 原文

飘落散花 2024-10-21 05:16:30

如果需要设置不同的视口，根据
设备（iPhone/iPad），需要使用device-width设置视口
上面的语句将在 iPhone 上设置 320px 的视口
iPad 上是 768px..猜猜这会转化为 0.3
和 0.7 你正在寻找..

这有效，但只有之后我意识到这一行不会进入...部分！我很愚蠢，但也许需要说一下。

谢谢！

If you need to set different viewport, based on the
device(iPhone/iPad), you need to set the viewport using device-width
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">
What the above statement will do is set a viewport of 320px on iPhone
and 768px on the iPad..Guess that is what woudld translate into 0.3
and 0.7 u are looking for..

This worked but only after I realized that this line does not go in the ... section! Dumb of me, but maybe needs to be said.

Thanks!

回复收藏 0 原文

素食主义者 2024-10-21 05:16:30

Tim 使用 jquery 的脚本似乎运行良好。我稍微改变了它，它似乎对我有用。我添加了一些比例参数。它为我提供了我的页面在 iPhone 和 iPad 上良好显示所需的结果。这是我添加的内容：

maximum-scale=2.0; user-scalable=1;

That script from Tim that uses jquery seems to work well. I changed it a little bit and it seems to work for me. I added some scale parameters. It gave me the results I needed for my page display well on both iphone and ipad. Here is what I added: