2015-10-16 25 views
0

我怎樣才能確定一個網站只有看代碼的響應?你會說,如果在CSS中至少有一個@media是響應式的?如何確保網站只響應查看代碼?

我發現這個尋找答案

術語通常反應只表示該網站使用CSS媒體選擇,以便修改基於設備屬性的佈局。 (source

我的觀點是@media並不意味着100%的響應能力,但它是一個很好的指標。

比方說,CSS開發人員開始做響應,但保持空白。在這種情況下,@media被檢測到,但網站仍然無法響應。

@media screen and (min-width: 601px) { 

} 

你說什麼?有沒有其他的選擇可以100%說一個網站是響應?

感謝您的時間和你的答案

+1

「響應」是一個主觀判斷,而不是二進制客觀現實。簡單地調整大小以適應寬度的頁面在技術上是響應的,但不是真的;一個頁面有一個專門的iPhone標題,但在移動設備上查看字體大小爲3px的內容也很有用,但實際上沒有。一個磚塊可以讓你的Android看起來不錯的網頁也是技術上的迴應。因此,最好的標準是「它在每個目標設備上看起來都不錯並且可用(不需要縮放)」?而且你無法將其量化爲一個正則表達式 - 你需要一個用戶來告訴你。 – Amadan

+0

我知道「我需要一個用戶來告訴」網站是否「在每個目標設備上看起來不錯並且可用」。但是,也許有人可以告訴我,以及@media是否在那裏,我會說是98%準確,這是一個響應式網站。但我真的很感謝你的回答。謝謝:) –

+1

好了,再 - 通過技術定義,是的,你可以,因爲'@ media'的存在使頁面響應技術,因爲它迴應媒體。實際上,你不能,因爲你不能通過代碼分析告訴頁面是否有用地響應媒體*(至少不要使用簡單的規則,比如「@ media」的存在;例如,一些非響應頁面確實有'@media print'塊來消除標題和導航)。我想有一個機會,你可以教一個分類器來識別一個有用的響應頁面,但它不會是萬無一失的。 – Amadan

回答

1

「通過查看代碼「你永遠不會絕對確定,但你可以從CSS和視口標記以及HTML元素的一般結構中獲得非常好的指示。

如果在諾基亞C2上無法正常顯示,或者在原始iPhone上顯示不正確,響應可能意味着幾乎所有東西都是「響應式」網站?它可能是響應式的,但不是那種類型的設備或顯示器的分辨率。

響應實際上對您而言意味着什麼?你有什麼目標設備,而你是不是瞄準?

有各種不同的平臺和設備[如舊的手機]不,不會通過檢查只是@media查詢(這將幾乎總是使用CSS3規則元素)支持CSS3所以你只需減少的它的機會不是工作。

測試每個設備上的網站是否唯一可行的方法是儘可能多地進行測試。有太多的設備,每個都有不同的標準解釋,只是因爲一個網站被廣泛地定義爲「響應」並不表示它將會在每個設備上按預期顯示。我已經看到了在標準iPad上顯示效果良好的網站,但在iPad的廉價版本上已經略微(幾個像素)。

最後,我覺得這個問題很廣泛,可以變成意見爲主。

此外:

  • 你打算什麼樣的檢查(S)的?你的空媒體查詢的例子似乎表明它是一個自動檢查和非人工檢查,所以最好的方法是檢查它在大顯示器上佔用全屏大小(> 800px寬),然後檢查它通過谷歌的mobile testing tool

  • 沒有總是需要媒體的質疑,有可能是這種可能性,即網站使用服務器變量來建立輸出畫面的大小和再加載自定義CSS文件來處理,這將那麼根本不使用媒體查詢。雖然現在我們擁有它們的可能性較小,但當移動網絡起飛時,這是一件大事,有些網站可能仍然保留這種方法。 這些網站在所有/大多數瀏覽器/設備上都能正常顯示,但它們實際上不是內聯響應式的

  • 看看http://www.google.co.uk的源代碼,該網站在我嘗試過的所有設備上都能正確顯示(甚至是諾基亞C2!),但它不顯示視口標籤,並且不顯示媒體查詢傳統意義上,這個網站可能是一個例外,但其他網站都差不多 - Facebook的 - 等等,問題是,有讓你的結果沒有一個方式所以你要我)非常具體的關於你」重新尋找和ii)接受你永遠不會超過60-80%的案例。

編輯:
有兩種類型的響應的」,也有直列響應(比方說),其中網頁重塑自身無需重新加載任何東西,再有就是服務器響應(讓我們說吧)在基於服務器的訪問瀏覽器的要求大小/設備上的數據。您只能在您目前爲止所描述的莊園,這意味着完全響應網站,如Facebook將留待檢查直列響應出你的測試工具。

編輯關於您的評論:
更「通用」的測試將是越來越有效的網站將獲得不正確的結果。例如,在某些Android手機上顯示的內容取決於哪個瀏覽器(Android默認瀏覽器是褲子,但Firefox很好),因此,即使Android手機上的某個用戶看到了該網站,它顯然無法正確呈現?

+0

正如你所說的,我正在使用自動支票作爲非人工支票,這就是爲什麼我知道100%確定這是不可能的。我真的很感謝你的回答(非常完整的順便說一句)。我想我會嘗試這是你剛剛建議的,檢查@media,視口並檢查它是否通過Google的移動測試工具。謝謝:) –

+0

我認爲你需要更具體地澄清你在找什麼,因爲「響應式」的術語太廣泛了。 @AdriánBolonio特別針對計算機算法進行區分。 – Martin

+0

我正在開發和應用程序來分析網站,並給出一些分數和公鑰基礎設施。一個指標是「您的網站是響應式的」(是/否),這意味着,您的網站在手機和桌面(一般的,而不是特定的設備)中正確顯示。我知道它很廣泛,但我想說的是它是否以通用的方式響應。就像是,它可以在大多數設備上使用。 –