我想為在iPhone和Android等手機上運行的Web瀏覽器更改網頁CSS。我已經在CSS文件中嘗試過類似的操作：@media handheld { body { color: red; } }但這似乎沒有任何作用，至少在iPhone上沒有。如何編寫CSS以在iPhone等上以不同方式工作，理想情況下不使用JavaScript？
3 回答
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
在此站點上，還有一些其他媒體查詢可用于定位iPhone / Android手機：
// target mobile devices
@media only screen and (max-device-width: 480px) {
body { max-width: 100%; }
}
// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
// CSS goes here
}
// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
// CSS goes here
}
我可以成功使用max-device-width媒體查詢來成功定位Android手機，盡管我必須將寬度最多調整為800px而不是列出的480。對于iPhone 4，-webkit-min-device-pixel-ratio用于定位iPhone4（最大設備寬度：480px無效，我認為定位于iPhone3，但沒有方便測試的對象。）
我可以看到它變得非常混亂，但是如果您必須支持多種設備并為每個設備都具有自定義CSS，只要它們支持媒體查詢，就可以根據需要調整每個平臺。是的，我會先按照標準進行編碼，以便可以使用盡可能多的CSS，但是很多時候我們都在討論如何提供當今所使用設備的適當大小的替代布局。
- 3 回答
- 0 關注
- 1100 瀏覽
添加回答
舉報
0/150
提交
取消