gpt4 book ai didi

JQuery 移动设备缩放

转载 作者:行者123 更新时间:2023-12-03 21:54:01 28 4
gpt4 key购买 nike

我正在使用 JQuery Mobile,但在从浏览器缩放到 iPhone 时遇到问题。

当我将它加载到浏览器(safari)上时,它会很好地收缩和扩展。然而,当我将其加载到 iPhone 上时,它无法缩放。它允许您在不应该的情况下左右滚动。

我是否应该添加一些东西,以使其在识别出它是移动设备时缩小尺寸。

这是我当前的 html。

    <head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" />
<link rel="stylesheet" href="http://www.domain.com/css/base.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">

</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>

<body>

<body>
<!-- Start of first page -->
<div data-role="page">
<div data-role="header">
<div id="header">
<ul>
<li>
<div><a href="logout.php">Logout</a>
</div>
</li>
<li style="float:right;">
<div><a href="new.php">New</a>
</div>
</li>
<h1 align="center">Title</h1>

</ul>
<div id="clear"></div>
</div>
</div>
<!-- /header -->
<div id="stream">
<div id="stream_story">
<ul style="width:100%">
<li>
<img src="" />
</li>
<li style="float:right;">></li>
<li style="width:75%;margin-bottom:10px;margin-left:5px;">Content
<br/><span>Content</span>
</li>
</ul>
</div>
<div id="clear"></div>
<hr/>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</body>

</html>

最佳答案

我在 iPhone 视口(viewport)和 JQuery-Mobile 方面也遇到了问题,最终得到了以下解决方案。

  • 添加一个元标记,将高度和宽度设置为设备高度/设备宽度(您可以通过将最大比例更改为大于 1 的值来允许用户进行缩放,但在以下示例中禁用缩放,我相信 Mobile Safari 允许的值最大为 10):

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

  • 当用户更改 iPhone 上的方向时,我注意到重新缩放和添加空白会出现一些奇怪的行为,因此我使用了以下代码:
    //check the navigator.userAgent string to detect if the user is using an iPhone    if (navigator.userAgent.match(/iPhone/i)) {        //cache the viewport tag if the user is using an iPhone        var $viewport = $('head').children('meta[name="viewport"]');        //bind an event handler to the window object for the orientationchange event        $(window).bind('orientationchange', function() {            if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {                //landscape                $viewport.attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');            } else {                //portrait                $viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');            }        //trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode)        }).trigger('orientationchange');    }

事件处理程序中的 if/then 语句检查用户已更改为哪个方向(90、-90 和 270 都是我见过的横向值)和 $viewport.attr('content',... line 只是切换视口(viewport)标签中的高度和宽度值。

关于JQuery 移动设备缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6448465/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com