2013-04-02 56 views
3

我不確定我如何才能使網站視網膜設備兼容,但無法測試並查看它是否正常工作。我已經按照這裏的指南http://www.presscoders.com/2012/10/how-to-make-your-wordpress-theme-retina-ready/來安裝和設置插件wp-retina-2x,並且它看起來應該可以工作,但我無法確定它是否真的存在。如何測試一個網站是否視網膜沒有Mac?

這就是我與http://brainbuzzmedia.com/themes/expression/

如果任何人有視網膜設備的工作,任何較小的圖像顯示在視網膜分辨率達的?如果他們的話,它們的文件名會在結尾有「@ 2x」。

+0

你是問如何去做,還是讓別人爲你驗證?其中之一是針對SO的有效問題,另一個更適合於其他地方。 –

+0

我想我知道如何去做,我想知道如何在沒有設備的情況下進行測試。 – fender967

+1

http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display/17228135#17228135 –

回答

3

只需打開您的Chrome開發人員工具並將鼠標懸停在<img>標記上即可(截圖在本評論結尾處)。你會看到兩種尺寸。一個是服務器上圖像的原始大小,第二個是您在網站上看到的圖像大小。

原始圖像大小至少應爲圖像內部標籤參數大小的兩倍。如果是這種情況,您的圖像已準備好視網膜。你不需要有視網膜顯示。

如:

在您的網站的IMG

HTML:<img width="100" height="100" alt="logo" />

原件(自然)的圖像保存在服務器上的尺寸:200×200

enter image description here

+0

這工作假設你不要不關心非視網膜用戶的開銷。 –

+0

當然,最好的解決方案是添加一些Javascript魔術來檢測像素比例,並僅將視網膜圖像提供給視網膜用戶而不是所有人。但在這種情況下,他只是問如何知道他的網站上的視網膜優化是否在沒有視網膜顯示的情況下工作。 – ms2

+0

對,但是如果您使用的是基於JS的解決方案來檢測視網膜顯示,那麼您的方法將無法正常工作,因爲常規分辨率圖像將在非視網膜顯示器上提供。 –