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

創(chuàng)新互聯(lián)建站從2013年創(chuàng)立，先為夾江等服務(wù)建站，夾江等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為夾江企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

h6頁面的viewpoint

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

viewpoint含義

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

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

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

最終用手機(jī)瀏覽h6頁面看到的效果，則是這三個(gè)viewpoint共同作用的。在沒有代碼干預(yù)的情況下，一般手機(jī)會(huì)有一個(gè)從viewpoint3到viewpoint1的縮放。手機(jī)為什么要設(shè)計(jì)這個(gè)機(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í)也是頁面實(shí)際寬度的viewpoint2是無關(guān)的。

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

當(dāng)前標(biāo)題：怎么理解h5頁面的viewpoint-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://weahome.cn/article/hiicp.html