以前做pc端,也会遇到兼容性的问题,不过说实话,脑海里全是ie的问题,并没有什么可特别注意的,可能是我不善总结,现在做移动端(本来觉得移动端很easy,所以没放在眼里),so,我错了,我为自己的轻视高傲买单!
最近就遇见了一些兼容性bug,从网上找了资料。
先说一下viewport
先上模板
<meta charset="utf-8"> <!--主要I是强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕缩放。--> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <!--这个也是iphone私有标签,允许全屏浏览。--> <meta content="yes" name="apple-mobile-web-app-capable"> <!--iphone的私有标签,iphone顶端状态条的样式。--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。--> <meta content="telephone=no" name="format-detection"> <!--禁止email识别--> <meta content="email=no" name="format-detection">
写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳
禁止复制、选中文本
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;
给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
IOS中input键盘事件keyup、keydown、keypress支持不是很好, 用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才可以响应
方法:可以用html5的oninput事件去代替keyup
<input type="text" id="testInput"> <script type="text/javascript"> document.getElementById('input').addEventListener('input', function(e){ var value = e.target.value; }); </script>
ios 设置input 按钮样式会被默认样式覆盖
解决方式如下:
input,textarea { border: 0; -webkit-appearance: none; }
- 消除 IE10 里面的那个叉号:input:-ms-clear{display:none;}
- 手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象
flex布局对于低版本的安卓,不支持flex-wrap:wrap属性,但是ios系统支持换行属性,这个时候如何解决呢?当然是不使用换行,用其他方式代替。
.box{ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ }
input 的placeholder属性会使文本位置偏上
line-height: (和input框的高度一样高)---pc端解决方法
line-height:normal ---移动端解决方法
input type=number之后,pc端出现上下箭头
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }
实现android和ios系统手机打开相机并可选择相册功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/> $(function () { //获取浏览器的userAgent,并转化为小写 var ua = navigator.userAgent.toLowerCase(); //判断是否是苹果手机,是则是true var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $("input:file").removeAttr("capture"); }; })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]