首頁(yè) 猿問(wèn) webview 寬度自適應(yīng)問(wèn)題

webview 寬度自適應(yīng)問(wèn)題

Android

慕仰6620973 2016-09-13 11:44:17

我頁(yè)面里加了這句。。<meta name="viewport" content="width=640,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />主要是width=640是這句。。在android webview里，會(huì)多出一部分跑到外面去。。不能適應(yīng)有辦法嗎？

查看完整描述

2 回答

已采納

weibo_哆啦A夢(mèng)有大口袋_0

TA貢獻(xiàn)107條經(jīng)驗(yàn) 獲得超146個(gè)贊

viewport 視口分為兩類
1. PC端瀏覽器只有一個(gè)視口
  這個(gè)視口就是瀏覽器主窗口的區(qū)域,顯示網(wǎng)頁(yè)內(nèi)容的區(qū)域。
2. 手機(jī)端瀏覽器有三個(gè)視口

????????1.布局視口 (layout viewport)

????????????????喬布斯引入一個(gè)布局視口的概念,布局視口就相當(dāng)于我在手機(jī)

????????????????上先不顯示,我先在一個(gè)虛擬的布局視口中把桌面端的頁(yè)面顯示

????????????????出來(lái),這個(gè)視口寬度一般定義為960px,把頁(yè)面虛擬渲染出來(lái),

????????????????我們會(huì)縮小這個(gè)頁(yè)面,以至于它可以再手機(jī)的瀏覽器整個(gè)的

????????????????顯示出來(lái),我們通過(guò)手勢(shì)進(jìn)行縮放。

? ? ? ??2.可視視口 (visual viewport)

????????????????網(wǎng)頁(yè)在手機(jī)上呈現(xiàn)出來(lái)的區(qū)域的大小叫做可視視口,對(duì)于可視

????????????????視口開(kāi)發(fā)者只需要知道它的存在和概念就可以了,因?yàn)槲覀?/p>

????????????????沒(méi)有辦法對(duì)它進(jìn)行任何的設(shè)置或者修改,它是用戶自己在進(jìn)行

????????????????縮放、拖動(dòng)之類的操作來(lái)修改的。所以可視視口的尺寸不會(huì)

????????????????是一個(gè)固定值,隨著用戶的縮放,可視視口在不斷的改變

????????3.理想視口 (ideal viewport)

????????????????1.由來(lái)

????????????????????????布局視口默認(rèn)寬度一般比較大(960px),可視視口默認(rèn)寬度

????????????????????????就是屏幕的寬度,也就是屏幕設(shè)備的寬度,這就導(dǎo)致了用戶

????????????????????????在查看頁(yè)面的時(shí)候需要通過(guò)縮放和滑動(dòng)頁(yè)面來(lái)查看頁(yè)面的

????????????????????????不同部分,這雖然很好解決了顯示為手機(jī)瀏覽器的網(wǎng)站,

????????????????????????當(dāng)是體驗(yàn)不是很好,就好像把手機(jī)當(dāng)做放大鏡,去放大

????????????????????????顯示網(wǎng)頁(yè)一樣,為了設(shè)計(jì)并構(gòu)建出來(lái)更適合手機(jī)瀏覽器上

????????????????????????查看的頁(yè)面,有引入了一個(gè)概念,叫做理想視口

????????????????2.概念

????????????????????????理想視口就是布局視口在一個(gè)設(shè)備上的最佳尺寸,理想視口下

????????????????????????的頁(yè)面便于瀏覽器瀏覽閱讀的最佳寬度。不需要縮放就

????????????????????????可以很好的查看頁(yè)面,理想視口在概念上有點(diǎn)類似于布局視口,

????????????????????????我們不按照960px來(lái)布局,按照理想視口來(lái)布局頁(yè)面不需要縮放

?????????????????????????就很方便,但它的寬度又和可視視口相同,理想視口就是為構(gòu)建

?????????????????????????手機(jī)瀏覽器優(yōu)化的頁(yè)面而添加的,一般來(lái)說(shuō)只有為手機(jī)瀏覽器

????????????????????????優(yōu)化過(guò)的頁(yè)面它才會(huì)使用理想視口

????????????????3.如何使用理想視口呢?

????????????????????????1.<meta name="viewport" content="width=device-width" />

????????????????????????????????1.width為布局視口寬度

????????????????????????????????2.device-width為可視視口寬度

????????????????????????????????3.當(dāng)width=device-width時(shí),width=device-width=理想視口

????????????????????????????????4.當(dāng)不指定屬性(width=device-width)時(shí),布局視口的寬度是廠商的默認(rèn)值

????????????????????????????????5.很多網(wǎng)頁(yè)禁用了用戶的縮放,例如:百度

????????????????????????????????????<meta name="viewport" content="width=device-width,

????????????????????????????????????minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

看完這些你就明白自己的錯(cuò)誤在哪里了

記得采納哦，不懂追問(wèn)

1 反對(duì) 回復(fù) 2016-09-13

weibo_哆啦A夢(mèng)有大口袋_0
640px來(lái)進(jìn)行自適應(yīng),你能告訴你的理解什么意思

回復(fù) 2016-09-13
weibo_哆啦A夢(mèng)有大口袋_0
兩個(gè)內(nèi)核都不相同

回復(fù) 2016-09-13
weibo_哆啦A夢(mèng)有大口袋_0
我做Web前端的,沒(méi)有用過(guò)WebView,你問(wèn)一些安卓開(kāi)發(fā)的吧

回復(fù) 2016-09-13