元素時在移動設備

我一直在撕裂我的頭髮與這一個一整天，所以任何幫助/建議是值得歡迎的感動！元素時在移動設備

基本上，我的新項目採用檢測移動瀏覽器的腳本，以檢查用戶在移動設備上，如果是禁止正常的樣式表，並啓用移動式樣式表。

我已經設法解決了大部分問題，但由於某些原因，我在其中一個部分的內容滑塊出現問題，它在每個幻燈片中都有兩個內聯元素，一個浮動左邊（文本）和一個浮動權（圖片）。出於某種原因，當第二張幻燈片被點擊時，圖片在文本下方向下移動。通常這會發生，如果沒有空間，但情況並非如此，因爲這兩個元素都有足夠的空間。

這只是發生在移動設備上，所以你可以看到我的意思去http://beta.residencyradio.com和去功能部分，目前的版本我已經工作是爲平板電腦，所以最好看那裏。

我的想法是這必須是在這個片段中的移動樣式表（見下文）代碼的東西做的，但我也不太清楚是什麼。

#feat { 
width: 60em; 
margin-top: 3.125em; 
display: inline-block; 
} 

.feat_container { 
width: 23.4375em; 
display: inline-block; 
margin-top: 9.0625em; 
margin-bottom: 9.0625em; 
float: left; 
} 

.feat_container p { 
font-size: 1.125em; 
line-height: 1.2em; 
margin-bottom: 0; 
} 

.feat_logo { 
width: 23.4375em; 
display: inline-block; 
float: right; 
margin: 0; 
} 

#feat_nav { 
float: left; 
display: inline-block; 
} 

#feat_nav a { 
background: url('../images/dot.png') no-repeat; 
font-size: 16px; 
padding-right: 9px; 
text-decoration: none; 
margin-right: 5px; 
color: rgba(1, 1, 1, 0); 
} 

#feat_nav a.activeSlide { 
background: url('../images/dot_active.png') no-repeat; 
} 

#PSM .feat_container { 
margin-top: 8.375em; 
margin-bottom: 8.375em; 
} 

#PSM, #banger, #hot, #eclectic, #definitive, #guest { 
width: 60em; 
} 

#guest .feat_container { 
margin-top: 7.6875em; 
margin-bottom: 7.6875em; 
}

任何幫助都將不勝感激！

感謝，

邁克爾

來源

2012-04-20 Michael

你用某種WSYIWYG編輯使這個？爲什麼這樣具體的'em's？無論如何，我沒有移動設備，但我在Android上看到了這種情況，試圖檢測寬度並自動進行調整。然後它會引發另一次調整，導致在我測試的任何桌面瀏覽器上不會發生的無限循環。我不知道這是否是你的問題，但它看起來像你做了一些與JS定位。如果可能的話，嘗試原始的CSS解決方案。 – Brad 2012-04-20 01:54:46

litterally剛剛纔出現，現在花花公子，問題是（對於一些未知的原因）的移動瀏覽器似乎有渲染與'width'設置爲特定值變化的問題。只是把它改成'min-width'，然後整理出來。這種特定ems的原因是將所有內容都按我想要的格式保存到像素中。爲什麼不使用你可能想知道的像素，簡而言之，它使桌面版到平板電腦（最終是移動版）的交叉變得非常輕而易舉，同時仍保持幾乎相同的佈局。 – Michael 2012-04-20 02:25:43

你在開玩笑 - 一個1.5MB的單頁！所有的瀏覽器嗅探！請找一個具有良好的** web **開發技能的人蔘與您的項目。 – RobG 2012-04-20 02:26:16

好吧，其實我管理的「燈泡時刻」之後摸不着頭腦。出於某種原因，移動設備（我在android和ios上測試過）似乎在幻燈片更改時渲染包含元素的寬度時出現問題，從而強制正確地浮動內容。

的修復，簡單地改變

#PSM, #banger, #hot, #eclectic, #definitive, #guest { width: 60em; }

到

#PSM, #banger, #hot, #eclectic, #definitive, #guest { max-width: 60em; }

這分揀出來，希望它可以幫助別人！

來源

2012-04-20 02:36:35 Michael

元素時在移動設備

回答

相關問題