移动端浏览器兼容问题和解决办法
问题一:移动端,input的键盘的右下角显示搜索(2个字)
解决:<form action=""><input type="search" placeholder="搜索课程名称或者关键词"></form>
问题二:如果我们在移动端点击了搜索,form表单有action就自动提交表单
解决: onsubmit="return false"例子:<form action="" id='goSearch' onsubmit="return false"><input type="search" placeholder="搜索课程名称或者关键词"></form>
问题三:如何收起键盘
解决:document.activeElement.blur();//搜索完成后直接收起键盘//点击空白处,收起键盘window.addEventListener('touchstart',function(){document.activeElement.blur();},false);
问题四: 元素被触摸时半透明遮罩(a,input,button,textarea)
解决: -webkit-tap-highlight-color:rgba(0,0,0,0);
问题五: ios如何关闭首字母自动大写
解决: <input autocaptialize='off'>
问题六:禁止长按某些操作
解决:img{-webkit-touch-callout:none;}
问题七:禁止用户选中文字进行操作
解决:ul,li,a,p,span,h1,h2,h3,h4,h5,h6{-webkit-user-select:none;}
问题八、解决html5不被ie低版本浏览器兼容问题:html5shiv.js
问题九、input的type属性值是tel的时候显示纯文字
问题十、解决placeholder的颜色问题:#id::-webkit-input-placeholder
问题十一、谷歌浏览器默认字体大小是16px,那么如何显示小于16px的? transorm的scale的缩放效果
问题十二:判断设备的js
function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match(/midp/i) == "midp";var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";var bIsAndroid = sUserAgent.match(/android/i) == "android";var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {window.location.href="http://127.0.0.1:8848/03%20h5+c3/46/demo2/m.html";}}browserRedirect();
问题十三:url在传值的时候,如果有空格,汉字,特殊字符,就会转码
解决方式:
encodeURI == 加码
decodeURI == 解码
问题14:修改输入框光标的颜色:caret-color:颜色;
问题15:修改状态栏的颜色://设置状态栏颜色
plus.navigator.setStatusBarBackground('颜色');
问题16:设置系统状态栏
plus.navigator.setStatusBarStyle(style);
问题17:开启沉浸式状态栏
1、找到manifest.json-源码视图
2、plus{ "statusbar":{"immersed":true //开启沉浸式} }
3、
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
有志者的同仁们可以在评论区提出更多的兼容问题及解决办法,或者提出问题也可以,我给大家想办法予以解答,共同进步!!!!!!
移动端浏览器兼容问题和解决办法相关推荐
- 关于浏览器兼容问题的解决办法,全部都在这里了
关于浏览器兼容问题的解决办法,全部都在这里了 参考文章: (1)关于浏览器兼容问题的解决办法,全部都在这里了 (2)https://www.cnblogs.com/myprogramer/p/6624 ...
- IE6,IE7,FF等浏览器不兼容原因及解决办法(转)
IE6,IE7,FF等浏览器不兼容原因及解决办法 2008-07-15 11:26 本文转载,作者:阿里巴巴前端开发,发到这里只是方便以后查看,也给各位需要的朋友. 浏览器的不兼容,大家肯定都是深恶痛 ...
- IE6IE7Firefox浏览器不兼容原因及解决办法
IE6IE7Firefox浏览器不兼容原因及解决办法 一.IE6IE7Firefox浏览器不兼容原因及解决办法 1.文字 本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下 ...
- JS中常遇到的浏览器兼容问题和解决方法
JS中常遇到的浏览器兼容问题和解决方法 参考文章: (1)JS中常遇到的浏览器兼容问题和解决方法 (2)https://www.cnblogs.com/wws-bk/p/9770834.html 备忘 ...
- 移动端常见兼容性问题及解决办法
移动端常见兼容性问题及解决办法 参考文章: (1)移动端常见兼容性问题及解决办法 (2)https://www.cnblogs.com/crazycode2/p/6624742.html 备忘一下.
- ie不显示html图片不显示,IE浏览器图片显示不出来 IE浏览器图片不显示解决办法...
很多人在使用ie浏览器打开网页时,发现所有的图片都是不显示出来的,可能重置之后浏览器图片显示不出来,也有可能是在ie浏览器设置中,没有启用显示图片选项,如果没有图片显示的话,该如何设置让图片显示出来呢 ...
- FireFox火狐浏览器字体模糊的解决办法
FireFox火狐浏览器字体模糊的解决办法.打开选项->高级->关闭"自动启用硬件加速"! 解决问题! 转载于:https://my.oschina.net/u/179 ...
- 谷歌/Edge浏览器“STATUS_INVALID_IMAGE_HASH“错误状态码解决办法
** 谷歌/Edge浏览器"STATUS_INVALID_IMAGE_HASH"错误状态码解决办法 ** 参考博客:https://www.cnblogs.com/VueDi/p/ ...
- 戴尔G3 3579笔记本无法使用耳机上的麦克风/声卡驱动异常/无声音/声卡版本不兼容 的一个解决办法
戴尔G3 3579笔记本麦克风用不了/声卡驱动异常/无声音/声卡版本不兼容 的一个解决办法 遇到的问题(症状) 戴尔G3 3579笔记本重装系统后插入耳机不再弹出询问框询问插入的是何种设备 识别不到普 ...
最新文章
- 深度学习框架:GPU
- TensorRT 加速性能分析
- java ip包_java网络抓ip包 首部是个什么情况
- web 平台搭建-LNMP-源码包(CentOS-7)
- 删除不再位于远程的跟踪分支
- Django框架深入了解_03(DRF之认证组件、权限组件、频率组件、token)
- graphpad如何做x轴在上方的图_数据分析最有用的25个 Matplotlib图
- LeetCode 983. 最低票价(动态规划)
- Android颜色选择器库
- [互联网面试笔试汇总C/C++-9] 实现赋值运算符函数-剑指offer
- 等差乘等比数列求和公式
- 保持初心,不负韶华||回顾2021,展望2022
- php微信公众号报修系统,微信公众号如何实现在线报修系统?
- Linux系统管理(二)连网
- 我的 Python 全栈开发自学笔记
- 三种方法实现选择问题
- 关于Suse Linux 10的启动过程(转)
- 一幅长文细学华为MRS大数据开发(五)——MapReduce和Yarn
- OSPF特殊区域之 完全NSSA区域
- php获取手机ip地址,获取手机的ip地址