怎么理解h5頁面的viewpoint

本篇內(nèi)容主要講解“怎么理解h5頁面的viewpoint”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么理解h5頁面的viewpoint”吧!

　　h6頁面的viewpoint

　　網(wǎng)上曾看到一個據(jù)說很有名的外國人，寫過一篇"三個viewpoint"的概念，但是看了，覺得似懂非懂，后來做了不少h6頁面，然后重新思考viewpoint到底是一種怎樣的控制移動端頁面的機(jī)制？于是我也覺得用"3個viewpoint"解釋比較好說，不過跟網(wǎng)上那個外國大佬的"三個viewport"可能會有不少區(qū)別。

　　viewpoint含義

　　第一個viewpoint，這里臨時命名為viewpoint1，就是手機(jī)硬件屏幕的水平像素?cái)?shù)，比如iPhone6分辨率是750像素，那么這個viewpoint就是750

　　第二個viewpoint，這里臨時命名為viewpoint2，是設(shè)計(jì)稿尺寸寬度，通常是以一個用戶占有率比較高的手機(jī)分辨率為基準(zhǔn)，很多就是用iPhone6的750

　　第三個viewpoint，這里臨時命名為viewpoint3，就是手機(jī)瀏覽器畫布的寬度，它通常有一個遠(yuǎn)大于硬件分辨率的尺寸，比如980px，和主流PC端網(wǎng)頁的內(nèi)容主體寬度相當(dāng)。前端能夠直接施加影響的就只有viewpoint3這個了，實(shí)際上客觀存在的viewpoint可以說也只有這一個而已，可以在html中用標(biāo)簽meta設(shè)置，也可以JS動態(tài)設(shè)置。

　　最終用手機(jī)瀏覽h6頁面看到的效果，則是這三個viewpoint共同作用的。在沒有代碼干預(yù)的情況下，一般手機(jī)會有一個從viewpoint3到viewpoint1的縮放。手機(jī)為什么要設(shè)計(jì)這個機(jī)制呢？因?yàn)槭謾C(jī)硬件屏幕小，但是又想讓手機(jī)能正常瀏覽PC的頁面。

　　為了更好的體驗(yàn)，人們開始為手機(jī)定制web頁面，比如既然iphone6是750px，那我就做750px的頁面?？墒羌幢闳绱?，手機(jī)實(shí)際看到的頁面效果卻仍然是被縮放了，因?yàn)?50px的頁面還是要放入到980px的viewpoint3中來顯示，而縮放是viewpoint3到viewpoint1的過程，和設(shè)計(jì)稿寬度，同時也是頁面實(shí)際寬度的viewpoint2是無關(guān)的。

到此，相信大家對“怎么理解h5頁面的viewpoint”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！