随着移动端越来越普及,前端技术也是百花齐放,但目前移动平台的技术已经趋向于成熟,记得刚实习的时候就是接触的移动端,但现在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之移动平台资源的更多相关文章

  1. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  2. Unity3d各平台资源路径文件夹

    之前一直是PC项目,公司终于考虑移动平台了,但是试验了几把,感觉移动平台资源管理路径还是有很多隐藏的注意事项. 比如在PC上可以做到随便读写,但是在移动平台就涉及到权限问题. 看到小伙伴的总结,还是要 ...

  3. 10 个轻松学会 CSS3 的优秀在线资源

    本文包揽 CSS 的所有关键点,并且引入了最新的 CSS3 版本.这个先进的技术提供超级多的新标签和属性,使得 Web 设计构建创新更简单,帮助开发者创建具有新趋势,带有漂亮布局的 Web 页面.随着 ...

  4. PaaS平台资源

    http://www.vagrantup.com/ http://www.docker.com/

  5. openStack telemetry/ceilometry 云平台资源监控度量

  6. 云平台资源挂盘办法V1.2

    一.优先使用mount 方式进行挂盘,记得使用sync参数,如果对方网络限制了445端口,我们被迫采用第二种办法. mount -t cifs -o sync,username='Administra ...

  7. 使用 Velero 跨云平台迁移集群资源到 TKE

    概述 Velero 是一个非常强大的开源工具,可以安全地备份和还原,执行灾难恢复以及迁移Kubernetes群集资源和持久卷,可以在 TKE 平台上使用 Velero 备份.还原和迁移集群资源,关于如 ...

  8. CSS3字体模块

    介绍 字体提供了包含字符的视觉表现的资源.在最简单的等级中,其包含由字符编码到表示这些字符的形状(被称为字形)的映射信息.根据一组标准字体属性被分入一个字体家族的字体共享一个通用设计风格.在一个家族中 ...

  9. WEB前端资源集(二)

    在上一篇为大家整理出了一些资源网站,接下来给大家整理了一些开发中常用的工具. 开发工具篇 开发工具集 Sublime Text 3:SublimeText 3是一个代码编辑器,也是HTML和散文先进的 ...

随机推荐

  1. [51nod1239] 欧拉函数之和(杜教筛)

    题面 传送门 题解 话说--就一个杜教筛--刚才那道拿过来改几行就行了-- //minamoto #include<bits/stdc++.h> #define R register #d ...

  2. git 创建、切换和提交新分支

    查看本地分支 git branch 创建新的分支 git branch <newBranch> 切换分支 git checkout <branchName> 创建并切换分支 g ...

  3. ArcGIS-各类问题

    arcgis 10.4破解方法*注意!Desktop,Engine,Server必须为同一版本 1.先安装License10.4 2.再安装Desktop10.4 3.再安装Engine10.4 4. ...

  4. Windows Server上用命令来起停IIS站点

    平时,在Server上管理IIS,都是在界面上进行一些配置,然后再做一些start和stop操作... 对于配置的人来说,会做一些重复步骤,所以适当的使用命令,能大大提高效率. 下面命令是自己之前使用 ...

  5. 【Leetcode】Permutation Sequence

    The set [1,2,3,…,n] contains a total of n! unique permutations. By listing and labeling all of the p ...

  6. BZOJ3620(kmp)

    要点 本题使用\(O(n^2)\)的算法 外层枚举左端点,内层一直kmp到结尾,中间遇到合法的就ans++ 如果是acccca这种数据直接kmp过程顺手判断即可:但是aaa这种数据,j = 2,实际判 ...

  7. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  8. SQL Server Reporting Service(SSRS) 第四篇 SSRS 常见问题总结

    1. 如何让表头在每页显示(译) A. 打开高级模式:  在分组栏中点击Column Goups右侧的箭头选择高级模式; B. 找到第一个Static组 在Row Groups区域中(注意不是Colu ...

  9. 安装 Office project 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    昨天在安装project 时总是弹出下图中的提示框,在网上搜索了很多办法但是没有解决这个问题. 后来进入到office.zh-cn的文件夹中,在officemui.msi文件中右键卸载,然后在重新安装 ...

  10. android apk反编译,重新打包,签名

    apktool安装 Windows系统: 1. 首先确保系统安装有Java 2. 下载最新版本的apktool.jar https://ibotpeaches.github.io/Apktool/ 下 ...