inputtype="search"placeholder="搜索课程名称或者关键词">/form>问题二:如果我们在移动端点击了搜索,form表单" />
移动端浏览器兼容问题和解决办法 | 您所在的位置:网站首页 › nodejs和浏览器 › 移动端浏览器兼容问题和解决办法 |
问题一:移动端,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=" /> 有志者的同仁们可以在评论区提出更多的兼容问题及解决办法,或者提出问题也可以,我给大家想办法予以解答,共同进步!!!!!! |
CopyRight 2018-2019 实验室设备网 版权所有 |