移动端浏览器兼容问题和解决办法

问题一:移动端,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" />

有志者的同仁们可以在评论区提出更多的兼容问题及解决办法,或者提出问题也可以,我给大家想办法予以解答,共同进步!!!!!!

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值