Q

iPhone/iPod上的移動Safari瀏覽器CSS破解

2012-07-13 81 views 5 likes

5

有誰知道一個好的現代CSS黑客只能定位iPhone和iPod Touch上的移動Safari嗎？iPhone/iPod上的移動Safari瀏覽器CSS破解

我總是看到@media screen and (max-device-width: 480px)，但這是從3年前開始的，現在與其他Nexus S相匹配。

（這是爲了解決一個微妙的佈局問題。我知道瀏覽器嗅探是邪惡等）

2012-07-13 mahemoff

A

回答

8

http://cssuseragent.org歡迎來到黑暗的一面。

2012-07-13 12:33:06

+0

謝謝，我會咬緊牙關，使用它，因爲它不會是我最後一次需要CSS黑客入侵。 – mahemoff 2012-07-13 12:50:21

+0

+1，用於發佈像用戶代理黑客這樣的現代化解決方案，它可能（可能）會被更新/維護，並且不會從一天到另一天失敗......所有其他可能會/將會。 – benzkji 2017-08-02 10:14:00

3

您可以使用only screen and (-webkit-min-device-pixel-ratio: 2)

2012-07-13 12:24:09

+2

目標使用Safari瀏覽器因此，我的Nexus 4與Chrome – 2015-01-21 12:10:45

0

只有這樣，才能針對特定的設備上的網絡是檢查用戶代理字符串。所有蘋果設備都在用戶代理字符串中有他們的名字。例如iPhone將有「iPhone」，iPod將有「iPod」。使用它來動態應用或加載CSS。

2012-07-13 12:24:40

1

您也可以要求-webkit-min-device-pixel-ratio: 2。我不認爲目前有些瀏覽器的報告高於2（雖然有些報告較低，所以使用最小比率） - 但是，這不包括iPhone 3GS和非視網膜iPod Touch設備。對於那些，你必須做一些用戶代理嗅探。

2012-07-13 12:24:57

0

如果你只是需要針對Safari瀏覽器在手機上，只需添加一個媒體查詢到這個技巧：

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding: 10px; //or any property you need 
    } 
}

而且不要忘記將.safari_only類添加到您要定位的元素，例如：

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>

一個細節：這是要去也影響了Safari瀏覽器在Android設備上，但是...無論如何誰在Android設備:)

2017-03-31 20:42:53

相關問題