2 回答

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

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