2013-02-22 57 views
0

<'meta name =「viewport」content =「width = device-width initial-scale = 1.0,maximum-scale = 1.0,target -densitydpi = ...,user-scalable = 0「/>'
在不同的設備和瀏覽器上測試過。這兩款平板電腦都具有1280 * 800px的物理分辨率。星系標籤10「nexus 7 7」。viewport,target-densitydpi,pixelratio在chrome/mozilla中的星系標籤頁/ nexus上的行爲7

鉻+設備dpi的
星系:viewportwidth 1279px,像素比1,screen.width 1280
nexus7:VP 1279px,PR 1.3312 ...,SW 1280

鉻+高dpi
星系:VP 1919px,PR 1,SW 1280
nexus7:VP 1441px,PR 1.3312 ...,SW 1280

鉻+低DPI
星系:VP 959px,PR 1,SW 1280
nexus7:VP 720像素,PR 1.3312 ...,SW 1280


現在與Firefox(15/19)+
星系:VP 1280px,PR不確定的,SW 1280
nexus7:VP 853px,PR 1 ,sw 1280

853px是1280 * 2/3。

現在改變寬度屬性的任何離散值像1280 和取出規模邊界片都得到他們的1280 視口寬度留空白或設置爲「自動」,Vieport結果
星系:VP 980px ,pr undefined,sw 1280
nexus7:vp 980px,pr 1,sw 1280

有人能解釋一下嗎? mozilla不支持target-densitydpi。 所以它沒有效果。 並且pixelratio在18以前的mozilla版本中是未定義的,我想呢? 1)mozilla是基於android的nexus縮放2/3還是mozilla的「特性」? 2)980px從哪裏來?它與將「auto」設置爲寬度相同。但是,兩臺設備怎麼會得到980的viewport.width? W3C的一些默認值?

回答

0
+0

謝謝。我知道。但目標densitydpi甚至從未被壁虎支持,對吧?我仍然想知道它應該如何在webkit中起作用。 – 2013-02-22 22:51:28

+0

在您的鏈接中,應該使用。我就是做這個的。在Nexus 7(gecko)上產生853px,在Galaxy10.1上(壁虎)產生1280px,而在Nexus 7(chrome)和1279px Galaxy10.1(chrome)上產生960px。額外的chromes寬度受到用戶縮放之前的縮放影響。 – 2013-02-22 23:03:23

2

980px是被選爲蘋果公司在使創建視口中的數字,它大部分在iPhone(其已在推出一個更小的像素數)合理渲染網頁的。除非你是針對Android瀏覽器(我建議不要),否則視口中的目標密度將被忽略,並且根本不會在所有其他瀏覽器中使用(從我所知道的情況來看)。我們當然不會在Chrome中支持它,並且您不應該包含它或期望它能夠正常工作。沒有其他人支持視口中的目標密度,而WebKit不支持,也不會繼續支持它。

screen.width報告一個不同的值,它是(1/devicePixelRatio)*真實物理寬度的縮放值,所以nexus 7是800像素(縱向實像素),像素密度爲1.33,等於1 /1.33 * 800 = 601 css像素。

每個渲染引擎在處理視口的方式上都有所不同,但卻越來越一致。如果Gecko沒有pixleRation,那是因爲他們還沒有實現它。