android webview 电脑网页适应手机屏幕

2024-05-16 03:00:17

我们平时在使用webview加载网页的时候可能出现网页超出屏幕的情况，特别是手机在加载PC网页的时候，基本上都会出现屏幕不适配的情况。网上搜一下大多是使用如下方法：

webSettings.setUseWideViewPort(true)
webSettings.setLoadWithOverviewMode(true)

这两行代码确实可以在手机屏幕内显示整张电脑网页，但是有一个问题，就是网页内的字体会被缩小，影响用户体验。遇到这种问题，作为没有前端开发经验的我来说只能再去网上搜各种资料。终于搜到一个比较靠谱的，可能对于前端工程师来说是件很简单的事情。就是使用css。
具体内容如下。

网页宽度自动调整到手机宽度

其实并不难。首先，在网页代码的头部，加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

调整网页字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body { font: normal 100% Helvetica, Arial, sans-serif; }

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 { font-size: 1.5em; }

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small { font-size: 0.875em; }

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。

调整image大小

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img, object { max-width: 100%;}

参考

http://stackoverflow.com/questions/5448841/what-do-setusewideviewport-and-setloadwithoverviewmode-precisely-do
http://mobile.51cto.com/ahot-409516.htm

android webview 电脑网页适应手机屏幕相关推荐

Android 在电脑上共享手机屏幕
我们知道有的时候需要截取手机屏幕,可以通过豌豆荚,91助手等工具, 第一这种方式在电脑上看到的手机屏幕比实际的要小. 第二,需要安装此类软件,有时候该类软件和eclipse开发Android的时候可能 ...
Android WebView获取网页中JavaScript弹框内容
Android WebView获取网页中JavaScript弹框内容网页中弹窗的js代码为 <script type="text/javascript" language= ...
网页自适应手机屏幕的几种方法
网页自适应手机屏幕的几种方法一. 允许网页宽度自动调整 <meta name="viewport" content="width=device-width, in ...
Android入门笔记之更改手机屏幕方向
Android入门笔记之更改手机屏幕方向 <1>简介通过一个按钮组来改变横屏竖屏显示. <2>关键步骤主要通过android.app.activity.getRequest ...
android webview 自适应屏幕宽度,Android webview加载html自适应屏幕
最近又写了一篇文章 Android webview加载html代码上下左右有白边问题可以参考一下 webView.getSettings().setJavaScriptEnabled(true) ...
电脑控制手机-帮你在电脑上录制手机屏幕和声音
为了制作手游攻略视频,我苦苦寻找录屏软件.要录手机屏,要同步录制声音,还要在电脑端录制,手机端的录屏软件不行.手游攻略主要是要看游戏竞技细节,手机屏实在太小,每次要在电脑端放大看,才发现瑕疵,导致反复 ...
有什么软件android跟电脑连接无线,手机电脑连接的软件有哪些（安卓手机连接电脑的方法）...
虽然现在手机的功能越来越强大了,但有的时候我们还是要用到电脑,毕竟手机是不可能完全取代电脑的功能.如果你没有安装宽带又或者宽带信号有故障,电脑不能上网了,现在又要急着用电脑去从事你的工作.例如要把微信 ...
android 代码亮屏功能,Android Studio用代码唤醒手机屏幕并解锁
试过几个方案,只有这个好用. public static Context context; /** * 唤醒手机屏幕并解锁 */ public static void wakeUpAndUnlock( ...
android 动画空白页,Android WebView打开网页一片空白的解决方法
问题描述: 网页链接是Https链接网页链接在电脑的Chrome浏览器中打开正常网页链接在手机的Chrome浏览器中打开正常网页链接在IOS的App上打开正常网页链接在Android App中 ...
Android stadio 电脑连上手机可以识别，但是连不上Android stadio
原来是因为电脑没有装Android 手机驱动,我电脑刚装了系统. 很多驱动没有装.我有一个联想驱动管理,提示我装Android手机驱动.装完之后,就可以识别到手机了. 如果你的手机在电脑不识别,那么装 ...

最新文章

热门文章