HTML CSS佈局在iPad橫向模式下縮小？

我正在做一個佈局iPad和佈局的寬度是950px，當我進入橫向模式時，我沒有得到任何水平滾動條（實際上我應該有，因爲佈局的寬度是固定的像素，其中950px不是786px）一切都很好，但頂級標題欄的高度正在縮小。HTML CSS佈局在iPad橫向模式下縮小？

我做錯了什麼。我希望我的佈局不應該在橫向模式下縮小。每個元素應具有與肖像模式相同的高度。

來源

2011-05-23 Jitendra Vyas

我懷疑viewport元龍點擊調整您的網站。嘗試將初始值固定爲1，最小值固定爲最大值。

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

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

來源

2011-05-23 14:41:41 DoubleYo

我們是否需要指定寬度？因爲在縱向模式下寬度將會不同 – 2011-05-23 14:44:40

您可以嘗試'width = device-width'，但我不確定結果。您也可以檢測orientationchange事件。 – DoubleYo 2011-05-23 14:54:49

請注意，關閉「縮放」功能會阻止用戶進行控制並縮放顯示屏，從而導致可訪問性問題。 – Premasagar 2011-05-23 16:04:36

-4

<link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

這可能也是有幫助的

來源

2011-05-23 15:18:25 pirklajos

「css/handheld.css？v = 2」是什麼？ – Premasagar 2011-05-23 15:55:14

他指的是[HTML5 Boilerplate]（http://www.html5boilerplate.com）附帶的默認handheld.css，但顯然沒有考慮提及該部分。 – nickb 2011-06-23 04:36:11

iPad是媒體屏幕！ – 2012-01-25 19:00:38

我不知道這是發生了什麼事給你，但在iOS上的錯誤，其中規模發生變化時在縱向和橫向模式之間切換。見http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

可以按如下方式解決這個問題：

這個元標記添加到HTML文檔的頭：

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

而且這個JavaScript添加到網頁 - 看https://gist.github.com/90129

(function(doc) { 

var addEvent = 'addEventListener', 
    type = 'gesturestart', 
    qsa = 'querySelectorAll', 
    scales = [1, 1], 
    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : []; 

function fix() { 
    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1]; 
    doc.removeEventListener(type, fix, true); 
} 

if ((meta = meta[meta.length - 1]) && addEvent in doc) { 
    fix(); 
    scales = [.25, 1.6]; 
    doc[addEvent](type, fix, true); 
} 

}(document));

來源

2011-05-23 16:04:58 Premasagar

嗨吉特德拉。那是爲你回答的嗎？ – Premasagar 2011-06-01 16:06:45

在webkit設備（Android/iOS）上，您可以在主體上使用此CSS來防止文本在方向更改（旋轉）後重新調整大小。我花了一段時間才找到它。希望它可以幫助其他奇特功能的人。

<style> 
body { 
    -webkit-text-size-adjust: none; 
} 
</style>

來源

2014-01-11 04:34:22 mbokil

HTML CSS佈局在iPad橫向模式下縮小？

回答

相關問題