不尋常的利潤率出現在iPad上，Safari瀏覽器

我在測試一個網站：This Website 不尋常的利潤率出現在iPad上，Safari瀏覽器

當我偶然發現了以下問題。在我測試的所有瀏覽器（IE，Chrome，Safari，Firefox等）中，一切都看起來是正確的。但是當我在iPad上測試此網站時，在Safari瀏覽器中，我在右側看到奇怪的邊距，無法顯示一個截圖，但簡而言之，就像你在電腦上看到的所有網頁一樣，但是轉移到了左側（所以右側有空白）。任何人都可以建議是什麼造成這個？

編輯：

我注意到，這個利潤率在某種程度上受到箭頭，你可以在側面看到的保證金（用於通過幻燈片列出）。按鈕的樣式具有以下ID的

#prevslide and #nextslide

EDIT2：

由於代碼很長，我將發佈鏈接到網站上使用此樣式表。

幻燈片樣式，#prevslide，#nextslide樣式規則可以在第二個樣式表中找到

Style1
Style2

而且主樣式表我用風格網站看起來，但我不認爲，問題在於它。

Main Style

來源

2012-08-10 Ilja

它看起來像你的問題是因爲你的CSS的％和像素的組合。

例如，您的.header包裝設置爲100％，但其中的.in頭部設置爲1020px。只要您的瀏覽器窗口寬度超過1020像素，這是沒問題的，但是當它縮小時，.header根據瀏覽器窗口調整大小，而.in-header不是。

設置你的身體元素的最小寬度屬性，因此它永遠不會減少你的主要頁面元素的大小下面：

body { 
    min-width: 1020px; 
    }

來源

2012-08-11 23:49:10

嗨thnx它現在工作;）），但仍然其中一個箭頭有奇怪的邊距它是#nextslide箭頭，它的樣式可以在Style2鏈接中添加到我的問題。它最初設定爲保證金最高：50％; ，但是當我將其更改爲不同的值時，網站上的所有內容都被搞砸了，我認爲這個邊緣是導致問題的原因。也許你對此有何看法？ – Ilja 2012-08-12 12:00:18

嗨，你的示例網站消失了，＆你的問題描述了與CSS不同的東西。 Chrome瀏覽器看起來不錯（不支持iPad）。所以，所有的事情都是盲目的！也就是說，我的第一個想法是找到一種方法來將幻燈片放在包含{position：relative}（包含1020寬度的現有元素或新的元素）的包含div中。使用％進行垂直定位可能會有問題;有時候利潤率可能會在兄弟之間發生很大的交互作用。 – 2012-08-13 11:26:02

你需要設置一個meta標籤在標題爲iPad（和移動）：

<meta name="viewport" content="width=device-width" />

它指示瀏覽器設置頁面主體相匹配的平板電腦尺寸。我不是100％肯定這是你想要的確切設置，但我沒有我的iPad方便測試;不管解決方案如何，它都在這個標籤中。

來源

2012-08-10 11:12:59

嘗試過了，沒有工作 – Ilja 2012-08-10 12:15:42

啊，我也只是在縮小尺寸的窗口中使用傳統Chrome瀏覽器查看您的網站。您所描述的內容與我遇到的問題完全相同，但上述修復工作正常，但問題不同。我添加了一個單獨的答案來解決您的問題，因爲我認爲這個答案可能會幫助其他人。 – 2012-08-11 23:34:52

不尋常的利潤率出現在iPad上，Safari瀏覽器

回答

相關問題