2 回答

TA貢獻107條經驗 獲得超146個贊
viewport 視口分為兩類
PC端瀏覽器只有一個視口
這個視口就是瀏覽器主窗口的區域,顯示網頁內容的區域。
手機端瀏覽器有三個視口
????????1.布局視口 (layout viewport)
????????????????喬布斯引入一個布局視口的概念,布局視口就相當于我在手機
????????????????上先不顯示,我先在一個虛擬的布局視口中把桌面端的頁面顯示
????????????????出來,這個視口寬度一般定義為960px,把頁面虛擬渲染出來,
????????????????我們會縮小這個頁面,以至于它可以再手機的瀏覽器整個的
????????????????顯示出來,我們通過手勢進行縮放。
? ? ? ??2.可視視口 (visual viewport)
????????????????網頁在手機上呈現出來的區域的大小叫做可視視口,對于可視
????????????????視口開發者只需要知道它的存在和概念就可以了,因為我們
????????????????沒有辦法對它進行任何的設置或者修改,它是用戶自己在進行
????????????????縮放、拖動之類的操作來修改的。所以可視視口的尺寸不會
????????????????是一個固定值,隨著用戶的縮放,可視視口在不斷的改變
????????3.理想視口 (ideal viewport)
????????????????1.由來
????????????????????????布局視口默認寬度一般比較大(960px),可視視口默認寬度
????????????????????????就是屏幕的寬度,也就是屏幕設備的寬度,這就導致了用戶
????????????????????????在查看頁面的時候需要通過縮放和滑動頁面來查看頁面的
????????????????????????不同部分,這雖然很好解決了顯示為手機瀏覽器的網站,
????????????????????????當是體驗不是很好,就好像把手機當做放大鏡,去放大
????????????????????????顯示網頁一樣,為了設計并構建出來更適合手機瀏覽器上
????????????????????????查看的頁面,有引入了一個概念,叫做理想視口
????????????????2.概念
????????????????????????理想視口就是布局視口在一個設備上的最佳尺寸,理想視口下
????????????????????????的頁面便于瀏覽器 瀏覽 閱讀的最佳寬度。不需要縮放就
????????????????????????可以很好的查看頁面,理想視口在概念上有點類似于布局視口,
????????????????????????我們不按照960px來布局,按照理想視口來布局頁面不需要縮放
?????????????????????????就很方便,但它的寬度又和可視視口相同,理想視口就是為構建
?????????????????????????手機瀏覽器優化的頁面而添加的,一般來說只有為手機瀏覽器
????????????????????????優化過的頁面它才會使用理想視口
????????????????3.如何使用理想視口呢?
????????????????????????1.<meta name="viewport" content="width=device-width" />
????????????????????????????????1.width為布局視口寬度
????????????????????????????????2.device-width為可視視口寬度
????????????????????????????????3.當width=device-width時,width=device-width=理想視口
????????????????????????????????4.當不指定屬性(width=device-width)時,布局視口的寬度是廠商的默認值
????????????????????????????????5.很多網頁禁用了用戶的縮放,例如:百度
????????????????????????????????????<meta name="viewport" content="width=device-width,
????????????????????????????????????minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
看完這些你就明白自己的錯誤在哪里了
記得采納哦,不懂追問

TA貢獻14條經驗 獲得超8個贊
自己解決了。。
默認設置這個(settings.setDefaultZoom)的時候只有3種
WebSettings.ZoomDensity.CLOSE,WebSettings.ZoomDensity.MEDIUM,WebSettings.ZoomDensity.FAR
后來去循環了WebSettings.ZoomDensity.values()是WebSettings.ZoomDensity的數組集合,就看看有哪些值,顯示有這么多種。。然后我選擇XFAR和XXFAR都能解決,屏幕內容超出的問題。
XXFAR,XFAR,?FAR,SFAR,MEDIUM,CLOSE
- 2 回答
- 1 關注
- 3174 瀏覽
添加回答
舉報