移動Safari瀏覽器：設備旋轉引起網站

的壞縮放我有iPhone和iPad的移動網站，我關閉用戶與移動Safari瀏覽器：設備旋轉引起網站

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

縮放，只要該網站是在橫向模式下能正常工作。網站的寬度恰好是屏幕的寬度。然後，如果我將設備旋轉到縱向模式，它會縮小，以適應新（較短）的寬度。這也是可以的。

但是如果我將其旋轉回風景模式，它會突然縮放到大約125％，這意味着現在可以進行水平滾動，並且自從最初禁用後無法進行縮放。

回到風景時，我怎樣才能在100％變焦時變回來？

謝謝！

來源

2011-02-24 clamp

嘗試用最大規模和最小規模的實驗，像這樣

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

，看看你能達到你在找什麼..

來源

2011-03-30 20:24:41 thumbsup

我只是進行了一些初步的測試和以下爲我創造了奇蹟：'' – Bitmanic

初始縮放比例對我也有幫助 - on iPad。 – cbuck12000

這是一個很好的解決方法，我覺得是移動Safari瀏覽器中的一個錯誤。鉗的原始元標記是我通常如何設置我的網站。我懷疑Safari中的某些東西在某些網站中的行爲並不像預期的那樣混亂，最終導致此問題。 – ghostfly

使用maximum-scale和minimum-scale停止變焦別因爲那樣你就會失去用戶放大的能力。這的確是一個糟糕的主意，因爲它使您的用戶眼睛不好生氣，你的網站不放大，而其他網站做...

我嘗試超時和各種花式的javascript的，後來我發現這一點： https://github.com/scottjehl/iOS-Orientationchange-Fix

在那個崗位，安德魯Ashbacher張貼由Scott Jehl編寫的代碼的鏈接：

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

這是一個SOLUT離子很好地包裹在一個IIFE，所以你不必擔心名稱空間問題。

只需將它放入您的腳本（如果您使用jQuery，則不會進入document.ready()）和中提琴！

它所做的只是在devicemotion上禁用縮放，表明orientationchange即將發生。這是我見過的最好的解決方案，因爲它實際上工作並且不禁用縮放。

編輯：這種方法並不總是可靠的，特別是當你拿着一個角度的ipad。此外，我不認爲這個事件可用於第一代ipad

來源

2012-06-01 22:17:13 tmsimont

禁用縮放是一個壞主意。這不是一個完美的解決方案，但是針對webkit在定位更改時縮放字體大小可以幫助最大限度地減少問題。你會離開文檔的用頭：

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

然後，你將可以解決字體大小縮放在你的CSS這樣的：

body { 
    font-size: 1.5rem; 
    line-height: 2.3rem; 
    -webkit-text-size-adjust: 100%; 
} 
/* This prevents mobile Safari from freely adjusting font-size */**

來源

2013-01-11 20:41:05

移動Safari瀏覽器：設備旋轉引起網站

回答

相關問題