iOS与Android中webview的css适配

最新推荐文章于 2022-10-27 10:39:23 发布
最新推荐文章于 2022-10-27 10:39:23 发布
阅读量2.3k 收藏
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011275280/article/details/40113443
版权
这篇博客探讨了在iOS和Android应用中使用Webview进行app开发时遇到的CSS适配问题。作者提到了两种主要的适配策略：根据屏幕像素值适配和根据实际页面像素值适配，并详细描述了每种策略的实现方式及其优缺点。对于iOS，作者建议关闭特定的Webview属性以避免横竖屏旋转时的缩放问题，而在Android上则需要针对不同屏幕尺寸编写多套CSS。
摘要由CSDN通过智能技术生成

无论是iOS还是Android，利用webview为基础，html5+css3来做app已经十分广泛.而优点也十分明显（之前一片文章中提到过）。

个人认为，这种app开发中存在2个大问题

1. js执行效率及内存泄漏问题（问题比较大，需要逐步探索优化）

2. css适配问题

这里主要记录下自己实践过的css适配问题，以备以后调研及开发使用

css适配：

1. 屏幕像素值适配（不常用，需要配合密度来适配）

这种情况可在请求页面时代入参数，分辨率及密度值，由服务器端决定吐不同css，可以解决全部适配问题

最近在android适配中发现新问题，

三星 N7000（2.3.6和4.0系统显示也不一致；4.0会把小css显示大，2.3.6会显示比4.0小），2.3.6是刷入的系统

2. 实际页面像素值适配（常用）

最低0.47元/天 解锁文章
关于webview中安卓和苹果页面缩放不同的问题
weixin_43930769的博客
08-30 729
关于webview中安卓和苹果页面缩放的问题 这是我在工作中自己遇到的问题，踩到的坑 我遇到的问题是这样的，验证码用的是webView的组件，在运行时发现安卓和苹果的验证码的大小不一致，而且苹果的验证码还可以双击放大缩小，这我就纳闷了，安卓苹果明明用的一套代码，为什么安卓正常，苹果就抽疯了，结果查了好久发现是webview的一个属性的问题，就是scalesPageToFit，这个属性呢就是适配屏幕...
css 区分 ios android,[CSS]解决安卓和ios ，样式或其他兼容问题
weixin_30294759的博客
05-28 2422
input \button 样式问题 , ios用的样式不管用。解决方法：在css样式里面加.input{-webkit-appearance: none;/*解决ios样式问题*/}ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态解决方法：禁止页面缩放input获取焦点时，去掉外层的高亮input:focus {outline:none;}css常用样式集合文字强制换行：w...
js与Android和iOS的webview交互，兼容的写法
Android之路
08-24 2380
Android和js交互需要有个映射的名字，像这样 webview.addJavascriptInterface(new jsToAndroid(),"android"); private class jsToAndroid { @JavascriptInterface public void goPay(){ ... ...
webview网页自适应手机屏幕大小
学习笔记
09-23 906
WebSettings webSettings = webview.getSettings();    webSettings.setSupportZoom(true);    webSettings.setJavaScriptEnabled(true);    webSettings.setJavaScriptCanOpenWindowsAutomatically(true);    web...
安卓 webview加载html图片自适应手机屏幕大小和点击查看大图
weixin_39621897的博客
03-14 1078
我们在开发中，显示信息详情时，一般后台会给出html文本，在android端一般采用webview控件来展示，但是后台给出的html文本一般是给电脑端用的，没有自适配手机，导致手机端图片显示过大，需要左右移动来查看全图。下面给出几种实用方法，达到在手机端用webview展示html中的图片，能自适应手机屏幕展示。需要用webview控件进行展示html文本，为使文字也自适应手机屏幕大小，需要先对a...
轻松理解iOS 11中webview的视口
08-29
总之，iOS 11中的Webview视口变化对开发者提出了新的挑战，但通过使用`viewport-fit`元标签和CSS常量，可以有效地解决布局问题，确保内容在各种iOS设备上都能正常显示。对于使用Web技术开发的iOS应用，了解并适配...
android 渲染和web渲染,H5页面在原生WebView中渲染适配问题(一)
weixin_29728529的博客
05-26 556
html在WebView中存在各种适配情况：比如标签宽度、图片大小、字体大小等。本节我们就先讲讲由这些尺寸导致的适配；对于SDK版本兼容适配、安全性适配以及结合路由与前端交互适配，在后续的文章中会发出;标签和图片适配我们先来确定几个问题以及在手机端上为什么要做这样的适配1. 对于容器标签如果超过屏幕宽度可能会出现左右滚动;2. 虽然容器标签比较正常，但其内部标签强制设置的宽度超过屏幕宽度可能会出现...
Android WebView适配
科技向善
11-16 511
//支持javascript web.getSettings().setJavaScriptEnabled(true); // 设置可以支持缩放 web.getSettings().setSupportZoom(true); // 设置出现缩放工具 web.getSettings().setBuiltInZoomControls(true); //扩大比例的缩放 ...
ios webview解析html,iOS WKWebView 本地HTML、JS、CSS文件加载详解
weixin_36143786的博客
06-25 657
iOS WKWebView 本地HTML、JS、CSS文件加载详解Tips:NSString类型的文件路径转换为URL的时候，一定要用NSURL *pathURL = [NSURL fileURLWithPath:filePath];方法去转换，否则资源URL不合法，APP会崩溃上源码接口：loadRequest方式加载API : iOS8即可使用- (nullable WKNavigation ...
ios webview屏幕适配
hwhjxja的博客
07-14 569
NSString* str1 =[NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%f%%'",70.0f];     [_webView stringByEvaluatingJavaScriptFromString:str1];
[CSS]解决安卓和ios ，样式或其他兼容问题
iChangebaobao的博客
11-08 1万+
input \button 样式问题 , ios用的样式不管用。 解决方法：在css样式里面加 .input{ -webkit-appearance: none;/*解决ios样式问题*/ } ios手机点击输入框页面放大，输入框失焦后，页面不复原，仍保持放大状态 解决方法：禁止页面缩放 <meta content="yes" name="apple-mobile-web-a...
android webview 不同手机屏幕,关于Android WebView内容不同屏幕兼容处理
weixin_30531997的博客
05-27 401
最近团队里项目开发APP时，其中有个界面要用到WebView来显示，而不用原生的控件。开发这个界面的时候遇到一个问题，就是Android的碎片化导致有众多屏幕分辨率，不同分辨率的屏幕对这个界面WebView内的控件大小兼容的问题。由于Android原生控件大小是由dp控制，而不是像素px，所以在不同尺寸的设备上的显示效果差异不会十分大。而web的主要是由像素px控制，导致显示出来的效果在不同分辨率...
css在ios和安卓上的兼容问题（持续更新）
qq_44318215的博客
10-27 3810
1、linear-gradient渐变在ios上会出现灰底 原因：ios不支持transparent表示透明，改用rgba(255, 255, 255, 0) 2、滚动条在安卓机上不显示 // 手动写scrollbar代码 &::-webkit-scrollbar { background-color: #fff; } &::-webkit-scrollbar-thumb { width: 8px; background: #E9E9E9; border-radius: 5
android webview css样式不支持,解决低版本安卓系统中webview对css的background写法不兼容问题...
weixin_32133403的博客
05-26 1686
背景对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。分析首先把原来的代码...
Android Webview适配屏幕宽度
zrbcsdn的专栏
07-25 1万+
网上有很多解决方案，但是，要么不适用（改h5），要么影响其他h5显示。 下面的代码，亲测，至少目前为止，管用。//支持javascript web.getSettings().setJavaScriptEnabled(true); // 设置可以支持缩放 web.getSettings().setSupportZoom(true); // 设置出现缩放工具 web.ge
H5页面WebView在iPhoneX的适配
热门推荐
如鱼得水的专栏
05-03 1万+
1.  iPhoneX的介绍屏幕尺寸    我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级...
Android的WebView适配H5
hxh的博客
12-26 1401
WebView web;web = (WebView) findViewById(R.id.webview);//-----------适配h5web.getSettings().setJavaScriptEnabled(true);web.getSettings().setDomStorageEnabled(true);//-----------// web.addJavascriptInter
WebView 加载HTML和CSS
seven_forjob的专栏
06-26 8543
个人开发项目中需要使用WebView加载一些网络上的内容，目前还没有深入的学习，这篇博客首先简单的记录一下WebView加载html和CSS的相关方法。加载html无非有三种情况：一、存放在assets文件夹下的html文件；二、直接加载某个指定的网页。 三、从网络上解析得到的html代码，注意此处是代码，即字符串格式。前两种情况比较类似: 首先获取WebView的控件：mWebView = (
Android WebView CSS支持
04-02 470
创建HTML应用程序可能是减少两个平台之间开发时间的好方法。 当今的趋势是开发适用于iOS的Web应用程序（具有大量的本机代码），并在其他平台（如Android）上简单地使用HTML， CSS和Javascript。 该过程可以很好地运行，并且可以节省大量时间，同时在多个平台上仍然拥有精美的抛光应用程序。 但是，这种方法存在一些陷阱。 主要麻烦之一是首先为iOS开发。 您会发现，iOS...
判断客户端使用的是安卓还是苹果，然后加载对应的css文件
发现美，玩起来
10-09 3991
<script type="text/javascript" charset="utf-8">var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 ios: !!u.match(/\(i[^;]+;( U;)? C
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值