我想為在iPhone和Android等手機(jī)上運(yùn)行的Web瀏覽器更改網(wǎng)頁(yè)CSS。我已經(jīng)在CSS文件中嘗試過(guò)類似的操作：@media handheld { body { color: red; } }但這似乎沒(méi)有任何作用，至少在iPhone上沒(méi)有。如何編寫(xiě)CSS以在iPhone等上以不同方式工作，理想情況下不使用JavaScript？
3 回答
慕斯709654
TA貢獻(xiàn)1840條經(jīng)驗(yàn) 獲得超5個(gè)贊
在此站點(diǎn)上，還有一些其他媒體查詢可用于定位iPhone / Android手機(jī)：
// 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媒體查詢來(lái)成功定位Android手機(jī)，盡管我必須將寬度最多調(diào)整為800px而不是列出的480。對(duì)于iPhone 4，-webkit-min-device-pixel-ratio用于定位iPhone4（最大設(shè)備寬度：480px無(wú)效，我認(rèn)為定位于iPhone3，但沒(méi)有方便測(cè)試的對(duì)象。）
我可以看到它變得非常混亂，但是如果您必須支持多種設(shè)備并為每個(gè)設(shè)備都具有自定義CSS，只要它們支持媒體查詢，就可以根據(jù)需要調(diào)整每個(gè)平臺(tái)。是的，我會(huì)先按照標(biāo)準(zhǔn)進(jìn)行編碼，以便可以使用盡可能多的CSS，但是很多時(shí)候我們都在討論如何提供當(dāng)今所使用設(shè)備的適當(dāng)大小的替代布局。
- 3 回答
- 0 關(guān)注
- 1110 瀏覽
添加回答
舉報(bào)
0/150
提交
取消