ios meta视口标记似乎被完全忽略或没有任何效果

bogh5gae  于 2023-02-17  发布在  iOS
关注(0)|答案(6)|浏览(165)

我在a webpage的头部添加了以下标记:
<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">
由于某些原因,它在我的iPhone上似乎被忽略了,甚至添加user-scalable=no也没有效果。我尝试了许多宽度、初始值等值...似乎没有任何效果。
有人知道是什么原因导致了这个结果吗?我可以在源代码中清楚地看到它就在标题中。
我的iPhone在iOS7上。

**编辑:**这个问题仍然发生在iOS6上的xcode ios模拟器上,所以我不认为这是由于iOS7。

gab6jxml

gab6jxml1#

您正在访问的页面不存在!

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

当我在手机(ios7 iphone5)上打开页面时,我看到了完全正确的结果。
您是否100%确定您真的尝试过将以下内容放入代码中?

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

它不会被忽视。

    • 更新1**

我刚看到你的代码好像是在使用我的第二个视口,但是我可能被javascript改成了640px的视口,这可能就是为什么你觉得它被忽略了的原因,因为在运行时视口会被改变...

    • 更新2**

ok发现了问题。

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
}

你的页面正在调用这个函数,它覆盖了你的 windows 。你知道这个函数吗?

l0oc07j2

l0oc07j22#

我知道这是一个很老的问题,但这是第一次在谷歌的结果时,我有这个问题,所以我想我会更新有关iOS 10。
苹果现在似乎完全覆盖了iOS 10中的user-scalable=no,以提高可访问性
See: Thomas Fuchs' Twitter Post

zmeyuzjn

zmeyuzjn3#

作为一种解决方法,您应该尝试使用以下代码:

html { 
    zoom: .8; 
}
vatpfxk5

vatpfxk54#

视口宽度在很多设备中是不同的。iOS在人像模式下有320,Android在人像模式下有360。风景模式--这取决于你有哪种设备,你会得到不同的像素值。
优化移动终端网站的最佳方法是设置width=device-width。如果不设置initial-scale=1.0 - iOs将在更改设备旋转时放大屏幕。
这是你需要的 meta标签。

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

如果要禁用缩放功能,请设置user-scalable=no

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

不要硬编码宽度属性,因为它将为纵向和横向模式设置相同的宽度-这是非常不愉快的用户体验。

最佳记录:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

关于iOS7此外,我想说-现在不要担心iOS7。它有太多的错误。阅读此处:http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

rpppsulh

rpppsulh6#

使用以下代码。

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

该系统已在多个矿山工程中得到应用。

相关问题