2010-10-08 143 views
46

我想更改我的網頁CSS,用於在手機上運行的網頁瀏覽器,例如iPhone和Android。我在CSS文件中試過這樣的東西:iPhone/Android瀏覽器支持CSS @media手持設備嗎?

@media handheld { 
    body { 
    color: red; 
    } 
    } 

但它似乎沒有任何效果,至少在iPhone上。我如何寫我的CSS在iPhone等不同的工作,理想情況下不使用JavaScript?

+0

大多數智能手機告訴CSS他們是 「屏幕」 ..考慮到它們相對較大的尺寸和較高的分辨率,這種分類很有意義。 HTML/CSS標準的一些部分不是很有用,而CSS「手持式」就是其中之一。而不是CSS設備類,使用CSS Media Queries來檢查實際尺寸(但即使這樣做有點棘手,因爲「邏輯視口」)。 – 2013-04-08 19:38:37

+5

我認爲,「掌上電腦」對於CSS來說是一個非常有效的軸 - 有時候你真的不關心具體的尺寸和DPI用戶屏幕是什麼 - 你做的*關心的是他們所做的交互。手持設備意味着包括屏幕在內的設備被握在手中,因此可以爲您提供一些相當準確的假設,例如屏幕尺寸最大可能不大於9英寸,並且該設備旨在用於手臂長度或所以這些東西在爲觀衆設計時很重要,我們必須停止所有的像素計數並進入更「通用」的高原 – amn 2016-04-17 10:54:03

回答

34

可以使用@media queries

<link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 

這種特殊的版本將針對iPhone(或任何其他設備用的480pxmax-device-width屏幕

蘋果的iPhone,雖然這是從內存,所以我不能完全確定它的準確性,所以選擇忽略使用handheldmobile樣式表,因爲它和其他iOS設備通過Safari可以或多或少地與桌面瀏覽器呈現CSS。對於其他設備我不確定,例如儘管A List Apart的文章(與上文相關)略微展示了一些文章,但它們的忠實度如何。


響應編輯發表評論,從@Colen:

嗯,它看起來像很多新的移動設備具有更高的分辨率(例如機器人X是854×480)。有沒有什麼方法可以檢測到這些?我不認爲這些查詢正在處理這些問題。

我無法肯定地說,因爲我沒有訪問到這些設備,但是另一個A List Apart Article: Responsive Web Design注意到:

幸運的是,W3C創建媒體查詢作爲CSS3規範的一部分,改善媒體類型的承諾。媒體查詢使我們不僅可以定位某些設備類,還可以實際檢查呈現我們工作的設備的物理特徵。例如,隨着最近移動WebKit的興起,媒體查詢成爲一種流行的客戶端技術,爲iPhone,Android手機等提供量身定製的樣式表。

所以我推測他們,Android設備,必須是目標能夠通過@媒體查詢,但是,正如指出的那樣,我不能肯定地說。

要定位於設備的分辨率,存在的一個示例:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> 

進一步閱讀:W3 Candidate Recommendation for media queries

+0

它應該是「max-device-width」(你有一個空間) ,但除此之外,這是偉大的。謝謝! – Colen 2010-10-08 19:03:34

+0

謝謝@Colen,錯字現在修復=) – 2010-10-08 19:06:03

+1

嗯,它看起來像很多新的移動設備具有更高的分辨率(例如,Droid X是854x480)有沒有什麼辦法檢測那些?我不認爲那些正在處理這個查詢 – Colen 2010-10-08 19:18:24

29

this site還有一些其他的媒體查詢,在指定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 
} 

我能夠成功地使用最大設備寬度媒體查詢成功目標的Android手機,儘管我不得不將寬度調整到800像素而不是480像素。對於iPhone 4來說,-webkit-min-device-pixel-ratio的工作目標是iPhone4(最大設備寬度:480px沒有,我認爲這將針對iPhone3,但沒有一個方便測試。)

我可以看到這個已經相當凌亂,但如果你有支持多種設備,併爲每個人定製的CSS,只要他們支持媒體查詢時出現,因爲它是可以做到的,你必須要什麼調整每個平臺。是的,我會首先編寫標準,以便儘可能多的CSS是可重複使用的,但是我們多次談論如何根據正在使用的設備適當地設置替代佈局。

18

@media handheld僅指那些古老的小原HTML手機從過去的幾年中,其甚至無法真正顯示網頁。該EPUB,MOBI,平板電腦,社區廠商都強調說的 「H * CK不,我們@media handheld設備!」因爲他們正確地擔心這會使他們永遠地置身於「真實」網頁的無人地帶。

今天的具有非常高的分辨率的顯示器小的設備,我們還沒有一個很好的方式來告訴HTML如何以相對較低的分辨率與小型顯示器具有極高的分辨率顯示在大屏幕顯示器的事情「正確」。作爲一個認證的老屁,我的眼睛想提醒你,不是,答案不僅僅是使字體縮小2倍。

+0

是否值得查看關於DPI/DPCM值的媒體查詢,屏幕大小以cm /英寸和寬高比,而不是? – 2013-04-19 09:47:25

4

不,iPhone或Android瀏覽器都不支持CSS @media handheld

0

看看使用媒體查詢'懸停'。

在SCSS文件將這個:

// At this point the CSS would target screens above 990px - but only 
// if they support hover (i.e. laptops, PC's etc). 
$point-at-which-use-large-screens: (min-width 990px) (hover hover); 

.some-class-you-want-to-target { 

    // Some CSS to only apply to larger screens with mouse available. 
    @include breakpoint($point-at-which-use-large-screens) { 
    color: red; 
    } 
} 

在SCSS運行咕嚕等在這之後會產生CSS看起來像:

@media (min-width: 991px) and (hover: hover) { 
    color:red; 
}