css3之移动平台资源
随着移动端越来越普及,前端技术也是百花齐放,但目前移动平台的技术已经趋向于成熟,记得刚实习的时候就是接触的移动端,但现在2年多来,期间遇到了很多莫名其妙的问题,见证了手机用户量的突飞猛进,兴喜的是更多的人能见识到自己做的东西,这也是我一直一来的动力,当然也迎来了前所未有的挑战,机型层出不穷,比如OV一个月迭代一次的速度,也是比较可怕的。
下面列举一下一些常用问题的调整技巧:
safari浏览器下
去掉input输入框半阴影效果(这是IOS的默认样式):
input{-webkit-appearance:none;}
链接图片禁止触发长按回调:
.css {
-webkit-touch-callout: none;
}
去掉元素点击半透明边框:
.css {
-webkit-tap-highlight-color: transparent;
}
表单内容禁止选中:
.css {
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
}
表单内容禁止拖放:
.css {
-webkit-user-drag: none;
}
修改placeholder颜色:
input::-webkit-input-placeholder {
color: #999999;
}
去掉android输入框的语音键:
input::-webkit-input-speech-button {
display: none;
}
去掉input输入框首字母大写的问题:
<input autocapitalize="off" autocorrect="off" />
去掉input输入框自动填充的问题(密码输入框,验证码输入框):
<input autocomplete="false"/>
input数字键盘唤起(iOS无小数点,android有,需要非法输入校验):
<input type="text" pattern="[0-9]*">
去掉input获取焦点高亮:
input:focus {
outline: none;
}
去掉textarea右下角小箭头:
textarea {
resize: none;
}
拍照摄影功能:
<input type="file" capture="camera" accept="image/*">
<input type="file" accept="video/*">
微信浏览器字体颜色改不了:
.css {
-webkit-text-fill-color: #999999;
}
滚动不流畅:
.css {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
硬件加速:
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Android webview上默认data-dpr="1",这是因为android手机普遍采用LCD屏,
但实际dpr可能不止是1,大部分是2,也可能是3,屏幕尺寸却还是一倍图尺寸
iOS webview上默认data-dpr="2"或者data-dpr="3",这是因为iOS普遍采用高清屏,
实际dpr就是data-dpr的值,屏幕尺寸为dpr值 X 1倍图尺寸
这里对DPR倍图适配的媒体查询上要有所区别,data-dpr只能是对屏幕是否为高清屏做区分,而对LCD屏的划分不是很准确,首先对于iOS的适配肯定是需要DPR做倍图划分的,而iPhoneX Retina屏的出现导致DPR的值是无法准确估计的,因此iOS适配上采用最小DPR去适配效果会好一些,而Android上各个LCD屏幕最大的DPR都是固定的,因此iOS和Android的媒体查询区别如下:
//android
@media only screen and (-webkit-max-device-pixel-ratio: @dpr) { }
//ios
@media only screen and (-webkit-min-device-pixel-ratio: @dpr) { }
当然另外一个有意思的地方是Android上部分机型可以适配非公开属性-webkit-device-pixel-ratio,对应的值为-webkit-max-device-pixel-ratio
css3之移动平台资源的更多相关文章
- HTMl5/CSS3/Javascript 学习推荐资源
HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...
- Unity3d各平台资源路径文件夹
之前一直是PC项目,公司终于考虑移动平台了,但是试验了几把,感觉移动平台资源管理路径还是有很多隐藏的注意事项. 比如在PC上可以做到随便读写,但是在移动平台就涉及到权限问题. 看到小伙伴的总结,还是要 ...
- 10 个轻松学会 CSS3 的优秀在线资源
本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本.这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面.随着 ...
- PaaS平台资源
http://www.vagrantup.com/ http://www.docker.com/
- openStack telemetry/ceilometry 云平台资源监控度量
- 云平台资源挂盘办法V1.2
一.优先使用mount 方式进行挂盘,记得使用sync参数,如果对方网络限制了445端口,我们被迫采用第二种办法. mount -t cifs -o sync,username='Administra ...
- 使用 Velero 跨云平台迁移集群资源到 TKE
概述 Velero 是一个非常强大的开源工具,可以安全地备份和还原,执行灾难恢复以及迁移Kubernetes群集资源和持久卷,可以在 TKE 平台上使用 Velero 备份.还原和迁移集群资源,关于如 ...
- CSS3字体模块
介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...
- WEB前端资源集(二)
在上一篇为大家整理出了一些资源网站,接下来给大家整理了一些开发中常用的工具. 开发工具篇 开发工具集 Sublime Text 3:SublimeText 3是一个代码编辑器,也是HTML和散文先进的 ...
随机推荐
- CF877E Danil and a Part-time Job 线段树维护dfs序
\(\color{#0066ff}{题目描述}\) 有一棵 n 个点的树,根结点为 1 号点,每个点的权值都是 1 或 0 共有 m 次操作,操作分为两种 get 询问一个点 x 的子树里有多少个 1 ...
- kuangbin专题十二 HDU1069 Monkey and Banana (dp)
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 获取3个月前的时间(获取某一天的时间 NSDate) --NSCalendar--NSDateComponents
-(void)getThreeMonthDate:(NSDate *)mydate { NSLog(@"%@",mydate); //1.创建NSCalendar NSCalend ...
- Qt 学习之路 2(10):对象模型
Home / Qt 学习之路 2 / Qt 学习之路 2(10):对象模型 Qt 学习之路 2(10):对象模型 豆子 2012年9月2日 Qt 学习之路 2 45条评论 标准 C++ 对象模 ...
- I2C(smbus pmbus)和SPI分析
2C和SPI作为两种非常常用的低速外部总线 I2C I2C是以前的飞利浦半导体制定的标准,也就是如今的NXP. I2C总线由一条数据线(SDA)和一条时钟线(SCL)组成.设备分主从,主设备提供时钟, ...
- CSS基础(续)
老男孩第39天 老男孩 CSS CSS的常用属性 4 文本属性 font-size: 10px; text-align: center; 横向排列 line-height: 200px; 文本行 ...
- Tomcat-猫
第1章 Tomcat简介 Tomcat 是一个web服务器 ,类似nginx,apache的http Nginx http 只能处理html等静态文件jpg() 网页分为静态网页(以.html 或 ...
- 复制虚拟机出现”适配器 的mac地址在保留地址范围内‘’
首先我的虚拟机是复制出来的,选择我已经移到,但是结果会出现了以下情况,导致了我无法ping 通,先看下提示: 使用:ipconfig –all 命令查寻,果然再现有打开的虚拟机中,存在两个mac地址相 ...
- Autel MaxiSys Pro MS908P
Autel MaxiSys pro MS908P is an evolutionary smart solution for specialized automotive diagnosis and ...
- ubuntu下找不到eth0
1.,查找不到eth0 2.修改/etc/network/interface 发现没有eth0网卡信息 添加如下 autho eth0 iface eth0 inet dhcp 执行 sudo /et ...