Viewport元標記無法在iPhone和Android中運行
[英]Viewport meta tag not working in iPhone and Android
問題描述
我使用以下HTML代碼
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
test
</body>
</html>
我的目的是防止用戶放大或縮小。 以上代碼在iPhone和Android中無效。 有解決方案嗎
編輯：它出現在iPhone設置中，如果在Settings>Accessibility>Zoom下選擇Zoom為On ，則這將覆蓋元標記。 資源
不知道為什么它會在android中發生。
6 個解決方案
解決方案1
5 已采納 2012-05-28 11:12:56
我使用此標記來阻止所有移動平台上的縮放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
有,沒有;
解決方案2
4 2014-09-05 12:56:43
在我看來，我的這個“視口”在Android（Nexus 5）和iPhone上運行良好。
<meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " />
希望這對你有所幫助！
解決方案3
3 2017-02-07 07:53:15
放置此腳本以避免縮放縮放。 在最新版本的safari中，如果meta標簽不起作用
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
解決方案4
1 2014-06-08 08:38:01
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; height=device-height" />
在三星Galaxy S3上運行良好
解決方案5
1 2018-06-14 16:26:30
它似乎在普通的iOS（11.3）瀏覽器中不再起作用。
但是，它仍會影響網頁，如果添加到主屏幕，並從那里啟動。
因此，如果您觸摸共享菜單，請選擇“添加到主屏幕”，然后從那里打開它將阻止您按預期進行縮放：
<meta charset="utf-8" />
<title>luckydonald/SelfhostedMouse</title>
<meta name="apple-mobile-web-app-title" content="SelfhostedMouse" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
解決方案6
0 2017-06-04 20:04:31
有些時候你需要將-webkit-flex：1添加到容器中（如果使用的是flexbox）。 這對我的視口問題有幫助。
如果是Android或iPhone，請更改元視口標簽
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.