是否只能在橫向模式下爲iPhone編寫css的方法相同? 謝謝媒體查詢 - 僅適用於iPhone的Css風景
13
A
回答
15
你可以這樣做這
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
這迫使iPhone渲染視口相同的設備寬度。
然後使用這個CSS瞄準風景模式,這是+320px
寬
@media screen and (min-width: 321px){
//styles
}
5
如果我理解正確的話,你想知道媒體查詢的目標像iPhone智能手機,只有當它保持水平,嘗試這樣的事情:
@media only screen and (min-width: 480px) and (max-width: 767px) {
/* styles go here */
body {
}
}
26
是的,當然。檢查:http://www.w3.org/TR/css3-mediaqueries/#orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
如果你想針對iPhone只有你有添加的分辨率或DPPX密度這些MQ。
1
實際上,如果你使用:
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=1.0">
則防止用戶在任何時間,這可能會導致可用性問題放大。
我會推薦您使用:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在這種情況下,強制將顯示在您的網頁在它的原始的初始規模,這樣您就可以指定你的媒體查詢不同的佈局尺寸,如當你旋轉你的iPhone時,佈局將被調整大小:
@media only screen and (min-width: 480px) {
/* landscape mode */
}
@media only screen and (max-width: 479px) {
/* portrait mode */
}
而且用戶仍然可以捏住頁面進行縮放。
1
相關問題
- 1. CSS媒體查詢不適用於iPhone
- 2. Css媒體查詢不適用於iPhone
- 3. CSS媒體查詢爲iPhone
- 4. 3個媒體查詢iphone的肖像,風景和ipad肖像
- 5. 媒體查詢爲iPad(橫向)適用於三星Galaxy Tab 2(風景)以及
- 6. 僅適用於nexus 10的媒體查詢?
- 7. Safari瀏覽器iPhone 6風景不服從媒體查詢
- 8. 媒體查詢 - 風景模式對iPhone太超大
- 9. iPhone 5的CSS媒體查詢
- 10. iPhone上的CSS媒體查詢
- 11. iPhone上的CSS媒體查詢
- 12. CSS3媒體查詢不適用於iPod/iPhone上的Safari
- 13. 媒體查詢不適用於Safari
- 14. 媒體查詢不適用於手機
- 15. 媒體查詢不適用於手機
- 16. 媒體查詢不適用於Ipad
- 17. 媒體查詢不適用於Android 4.2.2
- 18. css媒體查詢不適用於動畫後的jQuery對象
- 19. 適用於現代移動瀏覽器的CSS媒體查詢
- 20. 特定於媒體查詢的平板電腦風景
- 21. iPhone媒體查詢
- 22. 媒體查詢不適用於iphone寬度320px
- 23. 媒體查詢不適用於Android和iPhone
- 24. 媒體查詢不適用於iPhone和iPad
- 25. 響應式設計 - 媒體查詢不適用於iPhone?
- 26. 網站爲iPhone CSS媒體查詢
- 27. 基於媒體查詢應用CSS類
- 28. css媒體查詢檢測景觀只在移動iPhone上,Android
- 29. 媒體查詢CSS
- 30. CSS媒體查詢
這包括所有的480+的屏幕分辨率的設備... –