webview相关知识
标签类
1.Web App 建议用的样式
用于覆盖 WebView 默认的样式,使得 App 看起来更像原生的 App,——“不露出马脚”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* document.documentElement.style.webkitTouchCallout ='none'; //禁止弹出菜单 document.documentElement.style.webkitUserSelect = 'none';//禁止选中 */ body{ -webkit-text-size-adjust:none; /* 字型大小是不會變的,而使用者就無法透過縮放網頁來達成放大字型 */ -webkit-appearance: none; /*可以改变按钮或者其它控件看起来类似本地的控件*/ -webkit-user-drag: none; /*-webkit-user-drag CSS 属性控制能否将元素作为一个整体拖动。*/ } a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*很多Android 浏览器的 a 链接有边框,这里取消它 transparent */ } /* For WebApp */ body{ -webkit-user-select : none; /* 如果用户长按web网页的文本内容,都会出现选中的行为,提供复制文字等功能。禁止用户选中文字 for iOS */ } a, img{ -webkit-touch-callout:none; /* 在IOS浏览器里面,假如用户长按a标签,都会出现默认的弹出菜单事件。禁止用户在新窗口打开页面、如何禁止用户保存图片\复制图片 for iOS */ } |
2.固定页面宽度
1 2 | <meta name= "viewport" content= "width=320,user-scalable=0" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" /> |
3.触控面积
请保证将每条数据都放在一个 a 标签中,并设置其 display: block;,为何这样做?因为在触控手机上,为提升用户体验,尽可能的保证用户的可点击区域较大。
4.调用手机拨电话面板、短信面板
1 2 3 4 5 | <a href= "tel:18005555555" >Call us at 1-800-555-5555</a> <a href= "sms:18005555555" > <a href= "sms:18005555555,18005555556" > <a href= "sms:18005555555?body=" > //大都不支持body参数 |
安卓新系统支持程度都比较高,遗憾的是 iOS 新版反而不如旧版(旧版采用另外一种写法可以既支持号码又支持内容),详见下图:
5.去除 Android 平台中对手机、邮箱地址的识别
1 2 | <meta content= "email=no" name= "format-detection" /> <meta content= "telephone=no" name= "format-detection" /> |
6.如何禁止用户旋转设备
iOS已经禁止开发者阻止 orientationchange 事件,那 Android 呢?对不起,我没有找到任何资料说 Android 禁止开发者阻止浏览器 orientationchange 事件,但是在 Android 平台,确实也是阻止不了的。
7.如何关闭 iOS 中键盘自动大写
当虚拟键盘弹出时,默认情况下键盘是开启首字母大写的功能的,根据某些业务场景,可能我们需要关闭这个功能,移动版本 webkit 为 input 元素提供了 autocapitalize 属性,通过指定 autocapitalize=”off” 来关闭键盘默认首字母大写。
另,设置是否使用输入的自动更正、自动不全、英文自动首字母大写。
1 2 | <meta content= "email=no" name= "format-detection" /> <meta content= "telephone=no" name= "format-detection" /> |
8.IE8 CSS Selector
IE8 虽然提供 CSS Selector 的 querySelector()/querySelectorAll(),但搜索不了自定义标签,不过你可以用*[attrib=value]搜索,但效率较低。
样式类
1.自适应布局模式
在编写 CSS 时,不建议把容器的宽度定死。为达到适配各种手持设备,对 ipad、itouch、ipod、iphone、android、web safarik、chrome 都能够正常的显示,你无需再次考虑设备的分辨率。
2.禁止浏览器默认行为
1 2 3 4 5 6 7 8 9 10 11 | a, img{ /* 禁止用户在新窗口打开页面、如何禁止用户保存图片\复制图片 for iOS */ -webkit-touch-callout:none; } *{ /* 禁止用户选中文字 for iOS */ -webkit-user-select : none; /*很多Android 浏览器的 a 链接有边框,这里取消它*/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } |
安卓手机取消长按出现“复制”按钮的话,要修改 Webview 默认行为:
1 2 3 4 5 | webView.setOnLongClickListener( new OnLongClickListener(){ public boolean onLongClick(View v) { return true ; } }); |
3.如何解决盒子边框溢出
当你指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊的样式 -webkit-box-sizing:border-box; 用来指定该盒子的大小包括边框的宽度。
4.解决 CSS3 无法编写高光和内发光
这个时候你不妨使用 -webkit-border-image 来定义这个按钮的样式。 见下面正确代码和效果图:
1 2 3 4 5 6 | <style type= "text/css" > .bbb{width:300px; height:40px; line-height:40px;border:1px solid #dcdcdc;box-shadow:0px 0px 10px rgba(0,0,0,0.2) inset;border-radius:10px;} </style> <div class = "bbb" >ttttttttttttttttttttt</div> |
页面特效类
阻止页面整体滚动
1 2 3 | document.body.addEventListener( 'touchmove' , function (event) { event.preventDefault(); }, false ); |
去掉浏览器地址栏
1 | window.setTimeout(scrollTo, 0, 0, 0); |
这句代码必须放在 window.onload 里才能够正常的工作,而且你的当前文档的内容高度必须是高于窗口的高度时,这句代码才能有效的执行。
iOS 中如何获取滚动条的值
桌面浏览器中想要获取滚动条的值是通过 document.scrollTop 和 document.scrollLeft 得到的,但在 iOS 中你会发现这两个属性是未定义的,为什么呢?因为在 iOS 中没有滚动条的概念,在 Android 中通过这两个属性可以正常获取到滚动条的值,那么在 iOS 中我们该如何获取滚动条的值呢?通过 window.scrollY 和 window.scrollX 我们可以得到当前窗口的 y 轴和 x 轴滚动条的值。
---------------------
原文:https://blog.csdn.net/zhangxin09/article/details/8750586
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具