『壹』 web網站怎麼獲取訪問的移動設備的屏幕大小
相比較桌面端，用戶越來越多的從移動設備端訪問網頁，這已經不是什麼新鮮事。然而開發者還是需要努力去讓網站更好的適應現在的移動設備，與此同時，從谷歌最近宣布的消息可以看出，它可能會懲罰那些不能為移動設備用戶提供良好用戶體驗的網站，這也迫使開發者努力做好這方面事宜。本文介紹了一些技巧可以幫助你更好的提供良好的移動用戶體驗。 以下為譯文： 最近，谷歌員工暗示，不能提供友好用戶體驗的網站將受到來自谷歌搜索通信量的懲罰，谷歌在最近幾年已經介紹了多個演算法的變化，傷害了許多網站的流量。 不過谷歌的懲罰不應該是你努力使網站友好的主要動機，你的主要動機應該是為你的用戶提供他們想要的東西，為他們提供最好的用戶體驗。所以確保你的網站友好的對象是移動用戶，而不是谷歌。 選擇一個移動方案，著眼於更好的滿足網站用戶的需求 這里主要有四個方法可以為用戶提供更好的移動用戶體驗： 1. 創建一個單獨的手機網站 如果你想提供一個不同於桌面網站用戶體驗的移動用戶體驗，創建一個單獨的網站，讓移動用戶只有一個選擇。 這個解決方案可能在某些情況下有意義，但是由於其過程類似於建立一個全新的網站，因此許多Web開發者都避免這種方法。 由於谷歌認為這樣的移動用戶網站是不同於桌面網站的另一個網站，所以你應該在桌面網站設置一個rel=alternate鏈接tag，類似於： 而在移動網站頁面應包含rel=canonical鏈接tags，類似於： 2. 動態服務 移動和桌面網站不同URL的存在可能會給用戶造成一些混淆。另一方面，僅從屏幕寬度來判斷用戶設備是否是移動設備並不是一個可靠的方法。 因此你或許可以考慮動態服務，它可以用相同的URL服務於移動和桌面網站，只需根據用戶設備提供不同的HTML。 這種方法有點復雜，因為你需要有能力檢測用戶所使用設備的類型，如User-Agent(瀏覽器向伺服器發送的數據頭)。你可以在PHP中實現它(variable $_SERVER['HTTP_USER_AGENT'])，然後你需要查詢資料庫來確定設備尺寸，以此來計算設備是否是一個小屏幕。 當你通過相同的URL為不同的設備提供不同的HTML時，你還需要發送HTTP Vary響應，讓谷歌機器人知道你依賴用戶設備的網站，其工作是不同的，你可以使用下面的方法實現： Header('Vary: User-Agent'); ?> 3. 響應Web頁面 響應Web頁面是指頁面在Web頁面尺寸中適應性的調整變化。這意味著，如果Web頁面改變其尺寸，使用相同HTML代碼的頁面布局將在某種程度下適應本身。 在實踐中，不僅不同尺寸屏幕上出現的頁面緯度不同，而且這些頁面也需要適應設備方向的變化。比如說，當用戶旋轉設備的時候，如果開啟了重力感應，其頁面也會隨之改變。因為屏幕的寬度和高度發生了改變。 這種方法被稱為響應，因為它使用相同的HMTL動態的適應屏幕的變化，所以它非常的靈活。這種響應通常是使用CSS media查詢來實現，這里有個示例： .c640 { display: block; } @media (max-width: 640px) { .c640 { display: none; } } 4. 移動應用 這種方法可以說是一種互補的解決方案，它包含在可以安裝在用戶設備上的移動應用中，有利用本地設備的能力。而且有些原生功能，用戶無法通過訪問你的網站來獲得，例如向他們的設備發送一些推送通知等。 十個網站響應的技巧 1. 從網站訪問次數最多的頁面開始 如果你使用的是類似Wordpress這樣的常見內容管理系統，你的工作將簡單很多，因為你只需要通過一個響應站點更換主題即可。 如果你有一個基於定製開發的網站，比如說是PHP類的情況下，你將需要為適應移動用戶做一些定製開發。 如果你有一個擁有上千頁面的大網站，還要適應PHP類。你的工作將是巨大的，可能需要數月時間才能完成。因此你需要為這些影響更多用戶的頁面制定一個標准。 在PHP類網站的情況下，很容易確定影響更多用戶的頁面是發布於網站上的包，因為它們獲得更多的訪問量。除此之外，其他被訪問最多的網頁類型就不是很明確了。 因此你需要考慮站點谷歌分析報告，如果你擔心谷歌啟動演算法更新，處罰非移動友好站點，那麼最好看一下網站管理員工具報告，特別是Search Queries和Top Pages。 你可以使用PHP網站管理員工具API類來提取你所需要的頁面報告。 2. 使用瀏覽器開發者工具在小屏幕上預覽你的頁面 一旦你找到了首要處理的頁面，你需要掌控目前可能出現的問題，防止它們呈現在移動設備的屏幕上。 現在的瀏覽器(如Chrome)會提供工具，可以上你在不同的屏幕尺寸上預覽頁面。 3. 使視窗適應屏幕尺寸 在這一點中，你首先要做的事是定義一個可以根據屏幕尺寸調整的視窗。(視窗是指一個頁面的可見部分)，如果一個頁面太大，不適應當前的屏幕解析度，這時可能需要滾動條。 定義視窗可以通過窗口寬度匹配設備寬度來實現，可以通過HTML標記指定的視窗參數。下面的這個例子里，我們定義窗口寬度匹配設備寬度，初始縮放范圍從1開始。這意味著移動瀏覽器將調整頁面寬度縮放比例來適應設備寬度。 4. 從頁眉頁腳開始 當你通過窗口寬度匹配設備寬度定義視窗後，你可能會注意到針對桌面的頁面不適應小型移動設備屏幕，會出現溢出問題。這是你需要構建HTML響應。通常情況下，所有的網站都有帶有頁面和頁腳HTML的頁面。你可以從這里開始，因為你改變這些頁面和頁腳將影響所有的頁面。 5. 使用菜單按鈕收縮導航欄 PHP類網站下，可以使用兩個水平菜單：一個常見的導航，另一個用於記錄用戶操作。 橫向菜單可以利用可用的水平空間的優勢，所以基本上所有的響應頁面，其導航菜單都會有兩個版本：一個是寬屏幕時，整個菜單選項可以水平顯示，另一個則是菜單搜索按鍵加一個搜索欄。 網站使用media查詢來顯示單一類型的導航(或另一個)，下面代碼演示的是HTML和CSS實現該功能的簡化版本： Desktop menu here Mobile menu here @media (max-width: 1024px) { .c1025 { display: none; } } @media (min-width: 1025px) { .u1025 { display: none; } } 用PHP類構建的菜單按鈕使用了一個很好的技巧來避免對JavaScript的需求。它使用一個隱藏的表單復選框來控制下拉菜單的可見性。 下面是使用HTML和CSS渲染這類菜單的簡化版本： All class groups Latest entries Top 10 charts Blog Forums Help FAQ Icon Image here .menu-items { position: absolute; z-index: 1001; background-color: #103754; border-color: #cccccc; border-style: solid; border-width: 1px; padding: 4px; top: 32px; line-height: 36px; } .menu-items a { color: #C3F0FF; font-weight: bold; text-decoration: none; } #navigation-menu { display: inline-block; padding: 6px 10px 0px 10px; } #navigation-menu .menu-items { display: none; } #navigation-button:checked + .menu-items { display: inline-block; } #navigation-menu input[type="checkbox"], #navigation-menu ul span.drop-icon { display: none; } 6. 犧牲不重要頁面元素 完成頁眉頁腳，你還要繼續你的步伐，穿梭於網站每個類型頁面中，按照頁面訪問優先順序(參照前文)。 使用瀏覽器開發工具在小屏幕上預覽頁面，減少視窗分離器寬度，直到頁面元素溢出視窗。 這時你需要找出哪些不重要的頁面元素，你可以使用CSS樣式通過media查詢犧牲和隱藏它們。 下面演示的是media查詢定義逐漸減少點，用於隱藏不同頁面元素： @media (max-width: 1024px) { .c1025 { display: none; } @media (min-width: 1025px) { .u1025 { display: none; } } @media (max-width: 499px) { .c499 { display: none; } } @media (max-width: 799px) { .c799 { display: none; } } @media (max-width: 640px) { .c640 { display: none; } } @media (max-width: 360px) { .c360 { display: none; } } 7. 使用Google Page Speed Insights來解決懸而未決的問題 谷歌驗證一個網站是否移動友好的標准有什麼?在視窗上顯示恰好的可見內容只是其中的一個標准，還有其他一些不太好評估的，比如接觸點的距離(如鏈接和按鈕)。 幸運的是，谷歌提供了一個工具來幫助我們發現需要修復的問題，這只是Google Page Speed Insights工具的一部分。 你只需要輸入一個你製作的頁面URL，它會向你展示一個等級(0%-100%)，讓你知道你的頁面在手機上的可用性等級，它還會顯示該頁面目前所存在的問題。 8. 圖像適應頁面寬度限制 你可能會遇到這樣一個問題，需要適應小屏幕的頁面存在很多的圖片元素。這時你有兩種選擇，一是如前面提到的，犧牲圖片元素;二是自動的調節圖片的寬度和高度，該方法適用於有可用的空間。 第二種方法可以通過將圖片的寬度設置為100%(或其他百分比)來實現，然後將圖片高度設置為自動，以此來保證原始圖片的比例。如下段代碼所示例的那樣： @media (max-width: 55em) { .blog-post-body p img { width: 100%; height: auto; } } 與圖像相關的另一個方面是，如果你的菜單和圖標使用的是小圖像時，當瀏覽器縮放視窗來匹配設備寬度，那些小圖片看起來會很大，如果那些圖片解析度很低的時候，更是會破壞整個頁面的質量。而解決這種問題的一個方法是使用高解析度圖片，設置較小值的寬度來匹配設備。 9. 安全“填充”鏈接和按鈕四周 谷歌工具可能會報告的另一個典型問題是，你的鏈接或按鈕太接近對方了，這很容易導致錯誤操作。你可以利用CSS樣式表“填充”這些鏈接和按鈕的空間，下面是一個簡單的示例： .safe-padding { padding: 2px; line-height: 200%; } 10.使用谷歌網站管理員工具：移動可用性報告 谷歌在Google Webmaster Tools網站上為我們提供了另一種工具：Mobile Usability(移動可用性)。它可以給你一個進程的概念，以及任何你可能或者你認為沒有解決的問題。 這個工具顯示不同類型的問題：觸摸元素太近、小字體尺寸、寬度固定窗口……。它可以給你提供擁有這些問題的頁的總數以及URL。不過工具不會實時報告這些，實際報告大概會延遲一個星期，所以它的報告中或許會存在你已修復的問題。盡管如此，它也是很有用處的，任何頁面的問題都會有一個鏈接，你對此會一目瞭然。 總結 對Web開發者來說，調整網站以適應移動設備是乏味和無聊的任務，遠沒有前端工作給人帶來的興奮。然而這是必須的進行的一項任務。 移動適應工作仍在繼續，只有部分頁面適應了移動設備，所以在未來我們會看到更多的變化。 無論如何，本文是為了分享一些有用的信息給那些正處於網站適應移動設備過程的人們。如果您已經經歷過類似的過程，或者您有其他相比較本文所分享的技巧而言更好的方法。您可以留下您的觀點，分享您的經驗。
『貳』 現在大屏幕上顯示畫面，但是在控制電腦上WEB就成這個樣子了。不知道該怎麼弄，求大神解釋。跪求！！十
『叄』 web UI 和移動UI的區別以及聯系
一、用戶與界面交互/操作的方式不同
Web網站：以滑鼠或觸摸板為媒介，多採用左鍵點擊的操作，也支持滑鼠滑過、滑鼠右鍵的操作方式。
移動App：直接用手指觸控屏幕，除了最通用的點擊操作之外，還支持滑動、捏合等各種復雜的手勢。
設計要點：
1、相比滑鼠，手指觸摸范圍更大，較難精確控制點擊位置，對此iOS人機交互規范中提到手指最合適的觸控區域至少需要44 point。所以移動App的點擊區域要設置的更大一些，不同點擊元素的間隔也不能太近。
2、Web網站支持滑鼠滑過的效果，一些tips提示通常採用滑鼠滑過展開/收起的交互方式。在移動App則不支持這類效果，通暢需要點擊特定的icon來收起/展開提示。
3、移動App支持的豐富的手勢操作，比如通過左滑可看到你可能需要的快捷操作「取消關注」、「刪除」，這類操作方式的特點是快捷高效，但對於初學者來說有一定的學習、獲知成本。我們在合理設計這些快捷操作方式的同時，還需要支持最通用的點擊方式來完成任務的操作路徑。針對手勢操作學習成本高的問題，一些App常通過新手引導的方式來教用戶。
4、移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內，或者提供快捷的手勢操作。
二、設備尺寸不同
Web網站：不同PC的解析度不同，瀏覽器窗口最大化的尺寸也不同；瀏覽器窗口可縮放。
移動App：設備尺寸相對較小；不同設備的解析度差異化較多，特別是Android；支持橫屏、豎屏調轉方向。
設計要點：
1、移動App的尺寸較小，一屏展示的內容有限，更需要明確哪些信息更為重要，有效的「組織」相關聯的內容，優先順序高的內容突出展示、次要內容適當「隱藏」。
2、Web網站因瀏覽器解析度差異較大、且窗口尺寸可變化，設計時需要確定好不同解析度的內容展示和布局，也因為這一點加上webapp的瀏覽需求，近幾年來響應式設計更為普遍。
3、因設備解析度、dpi大小不一，所以移動App在界面布局、圖片、文字的顯示上，要兼顧不同設備的效果，需要設計師與開發共同配合做好適配工作。
4、因移動設備支持橫屏、豎屏展示，所以在設計移動App（比如游戲、視頻播放界面）時，需要考慮用戶是否有「換個方向看看」的需求、哪些情況下切換屏幕方向、如何切換等。
三、使用環境不同
Web網站：通常坐在某個室內、使用時間相對較長；
移動App：既可能是長時間在室內使用、也可能是利用碎片化的時間使用，或站或坐或躺著或行走，姿勢不一；
設計要點：
1、使用Web網站時，用戶更為專注；
2、使用移動App時，用戶很容易被周邊環境所影響，對界面上展示的內容可能沒那麼容易留意到；長時間使用時更適合沉寂式瀏覽，碎片化時間使用時用戶可能沒有足夠的時間、每次瀏覽內容有限，類似「稍候閱讀」、「收藏」等功能則比較實用；用戶在移動過程中更容易誤操作，需要考慮如何防止誤操作、如何從錯誤中恢復。
四、網路環境不同
Web網站：網路相對穩定且基本無需擔心流量問題
移動App：因用戶使用環境復雜，可能在移動過程中從通暢環境到封閉的信號較差的環境，網路可能從有到無、從快到慢；既可使用無需擔心流量的WiFi，也可能使用需要控制流量的3G/4G。
設計要點：
1、移動App，網路異常的情況更普遍，需要更加重視這類場景下的錯誤提示、以及如何從錯誤中恢復的方法。
2、移動App，在3G/4G情況下用戶對流量比較重視，對於需要耗費較多流量的操作，需要提醒用戶，在用戶允許的前提下才繼續進行。
五、通知方式不同
Web網站：對於瀏覽器的通知中心，用戶使用的不多，很難主動喚起用戶
移動App：推送通知給用戶的方式很常見。
設計要點：
1、在移動App可以用通知及時提醒用戶一些重要信息，但也需要考慮用戶關閉通知提醒的場景下用戶仍然能無礙的使用；因為「通知」功能對用戶較為重要，設計師需要思考如何讓用戶更容易「開啟通知許可權」。
六、基於位置服務的精細度不同
Web網站：定位功能一般獲取到的是當前城市
移動App：可較為精確的獲取用戶的當前位置
設計要點：
1、移動App可合理的利用用戶的位置，給用戶提供一些服務。比如，地圖類可以搜索「我的位置」到目的地的路線，生活服務類可以查詢我的位置附近的美食、商場、電影院等等，這樣的方式省去了用戶手動輸入當前位置的復雜、更加智能化。
『肆』 UCWEB如何設置自適應屏幕大小
設置＞瀏覽模式＞適應屏幕。
『伍』 針對現在主流瀏覽器的大小設定，web全屏站的解析度是多少
通常都是1920*1080了
不過最好能作到兼容至少1024*786