2015-03-02 32 views
0

過去幾年中,智能手機技術毫無疑問地增加了。一些較新的智能手機具有非常生動和令人印象深刻的高清晰度屏幕,但是當涉及使用響應式設計編程網站時,使用@media CSS變得越來越困難。涵蓋大多數移動設備的CSS媒體查詢

似乎不可能僅基於像素來檢測正在使用的設備,並且每個智能手機都有很多單獨的媒體查詢。


是否有任何CSS媒體查詢能夠檢測到大多數智能手機,而不必單獨聲明每個智能手機?

***我試過使用only screen規範,但它似乎沒有做到我想要的。

+0

你是什麼意思「檢測大多數智能手機」?單獨檢測每個型號或檢測它是否是移動設備而不是PC? – Salketer 2015-03-02 15:10:06

+5

我不知道魔法媒體查詢,但設計移動網站的好方法是從小處開始,然後增加瀏覽器窗口的大小;當您的設計中斷/開始看起來很糟糕時,您會添加一個斷點(該解析的新媒體查詢)。這樣你就不必擔心設備。 – TylerH 2015-03-02 15:10:34

+1

@TylerH在鼻子上。如果你已經有了一個響應速度很快的網站,你可以做相反的事情,儘管這很難做到。從您的移動設計開始(假設您有足夠的桌面內容),然後放大您的瀏覽器。當設計變得笨拙時,記錄該窗口大小,添加斷點,設計並重復。 – ntgCleaner 2015-03-02 15:12:23

回答

2

我想你可能會從錯誤的角度來處理這個問題。在進行響應式設計時,您不應該關心不同設備的特定屏幕尺寸,您會試圖編寫所有例外代碼而發瘋。

只關心你自己的頁面佈局在不同的像素寬度。如果設計看起來好於320像素,將其稍微提升一點。它如何看待480px? 640像素?有幾個DIV流動不正常?標題字體大小太大/太小?圖像需要重新調整大小?在這些點上,您可以插入媒體查詢來調整頁面的佈局和設計。

只要爲移動設備提供不同的樣式表,並糾正錯誤,則必須嗅探UserAgent字符串併發送相應的CSS文件。這可以從服務器或客戶端完成。從我的理解來看,這並不理想,因爲您不能過分依賴UserAgent字符串中包含的內容,因爲它隨時間而變化。使用此方法可能會得到一個佈局,該佈局旨在顯示在480像素以下寬度的屏幕上,但會出現在實際更喜歡使用桌面佈局的較大平板上,或出現在480像素至960像素範圍內使用的佈局。

你可以看看適應性設計,儘管這聽起來不像你在做什麼。在自適應設計中,您可能會檢測到用戶所在的設備(寬度/類型/等),並將它們一起發送給其他網頁。 不是與佈局重新相同的頁面。一家大型航空公司是否會爲他們的移動用戶記下(不記得誰是荷航?)。他們發現,絕大多數用戶在通過手機訪問他們的網站時沒有購買機票,而是管理即將到來的/當前的航班 - 登機手續,航班狀態等。因此,他們提供了一個專注於這些功能和信息的網頁他們的桌面網站更加適合銷售。

就高分辨率屏幕而言,設備像素和CSS像素(又稱爲設備獨立像素?)之間存在差異。例如,我的三星Galaxy S4擁有1080x1920的設備像素,但它的CSS像素是360x640。 CSS像素是移動設備上的瀏覽器將用於呈現頁面的內容。儘管這取決於您在視口元標記中設置的內容。以下是我剛纔提到的一些工作鏈接 - https://developers.google.com/speed/docs/insights/ConfigureViewport。還有這個方便的小站點可以幫助您確定各種像素設置,比例等。 - http://mydevice.io/