溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“怎么理解h5頁面的viewpoint”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么理解h5頁面的viewpoint”吧!
h6頁面的viewpoint
網上曾看到一個據說很有名的外國人，寫過一篇"三個viewpoint"的概念，但是看了，覺得似懂非懂，后來做了不少h6頁面，然后重新思考viewpoint到底是一種怎樣的控制移動端頁面的機制？于是我也覺得用"3個viewpoint"解釋比較好說，不過跟網上那個外國大佬的"三個viewport"可能會有不少區別。
viewpoint含義
第一個viewpoint，這里臨時命名為viewpoint1，就是手機硬件屏幕的水平像素數，比如iPhone6分辨率是750像素，那么這個viewpoint就是750
第二個viewpoint，這里臨時命名為viewpoint2，是設計稿尺寸寬度，通常是以一個用戶占有率比較高的手機分辨率為基準，很多就是用iPhone6的750
第三個viewpoint，這里臨時命名為viewpoint3，就是手機瀏覽器畫布的寬度，它通常有一個遠大于硬件分辨率的尺寸，比如980px，和主流PC端網頁的內容主體寬度相當。前端能夠直接施加影響的就只有viewpoint3這個了，實際上客觀存在的viewpoint可以說也只有這一個而已，可以在html中用標簽meta設置，也可以JS動態設置。
最終用手機瀏覽h6頁面看到的效果，則是這三個viewpoint共同作用的。在沒有代碼干預的情況下，一般手機會有一個從viewpoint3到viewpoint1的縮放。手機為什么要設計這個機制呢？因為手機硬件屏幕小，但是又想讓手機能正常瀏覽PC的頁面。
為了更好的體驗，人們開始為手機定制web頁面，比如既然iphone6是750px，那我就做750px的頁面。可是即便如此，手機實際看到的頁面效果卻仍然是被縮放了，因為750px的頁面還是要放入到980px的viewpoint3中來顯示，而縮放是viewpoint3到viewpoint1的過程，和設計稿寬度，同時也是頁面實際寬度的viewpoint2是無關的。
到此，相信大家對“怎么理解h5頁面的viewpoint”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
