问题:Android 上圆形图片使用 border 时,边框显示变形

解决:给 img 外嵌套一个元素,为其使用圆角

<div>
<img src="">
</div>
div{
display: inline-block;
border-radius: 50%;
border: 4px solid #FF7000;
}
img{
vertical-align: top;
}

问题:Android 上圆角元素,背景颜色会溢出

解决:

{
background-clip: padding-box;
}

问题: Android 上圆角使用 Animation 做 loading 动画时,圆角背景色溢出的bug

解决:

{
background-color: #F9CEAC;
border-radius: 32px 0 0 32px;
-webkit-mask-image: url(http://i.gtimg.cn/qqlive/images/20150527/btn_mask.png);
}

原理是使用一个圆角的蒙板通过 -webkit-mask-image 遮住多余的部分。蒙板: 

问题:CSS 三角在 Android 上显示为方块

解决:可能是对这个三角使用了圆角,去掉 border-radius 即可

{
border: 10px solid transparent;
border-left-color: #000;
/*border-radius: 2px;*/
}

问题: Android 上使用 svg 作为 background-image 时显示模糊

解决:设置 background-size

{
-webkit-background-size: 100%;
background-size: 100%;
}

问题: :active 样式不生效

解决: 参考这篇文章

document.addEventListener("touchstart", function() {},false);

问题: 多行文字超出截断需要出现省略号

解决: 参考这篇文章

{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

问题: 1px 线条、边框

解决:使用高度为 1px ,一半为实色,一半为透明的渐变背景实现

{
background: -webkit-linear-gradient(top, transparent, transparent 50%, #CACDD0 50%) 0 top no-repeat;
background-size: 100% 1px;
}

如果需要有四个边框都有 1px 的线框,可以使用多背景图

{
background: -webkit-linear-gradient(top, #CACDD0, #CACDD0 50%, transparent 50%, transparent 100%) 0 top no-repeat,-webkit-linear-gradient(top, transparent, transparent 50%, #CACDD0 50%, #CACDD0 100%) 0 bottom no-repeat, -webkit-linear-gradient(left, #CACDD0, #CACDD0 50%, transparent 50%, transparent 100%) left 0 no-repeat, -webkit-linear-gradient(left, transparent, transparent 50%, #CACDD0 50%, #CACDD0 100%) right 0 no-repeat;
background-size: 100% 1px,100% 1px, 1px 100%, 1px 100%;
}

问题:滚动条滚动时没有像 iOS 原生那么顺滑流畅,滚动条没有 iOS 回弹效果

解决:

{
overflow: auto;
-webkit-overflow-scrolling: touch;
}

注:在 Android 上由于原生滚动没有回弹效果,所以这里也不会有回弹的效果。

问题:当模块使用系统的横向滚动时,不想显示出系统的滚动条样式

解决:

Android:

::-webkit-scrollbar{
opacity: 0;
}

iOS 要隐藏滚动条,会稍微复杂一些

<div class="wrap">
<div class="box"></div>
</div>
.wrap{
height: 100px;
overflow: hidden;
}
.box{
width: 100%;
height: -webkit-calc(100% + 5px);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

原理:.box 元素的横向滚动条通过其外层元素 .wrap 的 overflow:hide 来隐藏。 (5px 是 iOS 上滚动条元素的高度)

问题:横向滚动的元素,滑动时有时图片显示不出来/文字显示不出来

解决:给每个横滑的元素块使用硬件加速

li{
-webkit-transform: translateZ(0);
}

问题:使用 animation 动画后,页面上 overflow:auto 的元素滚动条不能滑动

解决:不使用 translate 方式的动画,换为使用 left/top 来实现元素移动的动画

问题: 上下滑动页面时候,页面元素消失

解决:检查是否使用了 fadeIn 的 animation,如有则 fill-mode 使用 backwards 模式

{
-webkit-animation: fadeIn 0.5s ease backwards;
}

问题:页面上数字自动变成了可以点击的链接

解决:在页面 <head> 里添加

<meta name="format-detection" content="telephone=no">

问题:input 在 iOS 中圆角、内阴影去不掉

解决:

input{
-webkit-appearance: none;
border-radius: 0;
}

问题:焦点在 input 时,placeholder 没有隐藏

解决:

input:focus::-webkit-input-placeholder{
opacity: 0;
}

问题: input 输入框调出数字输入键盘

解决

<input type="number" />
<input type="number" pattern="[0-9]*" />
<input type="tel" />

分别对应下图中的1、2、3。

需要注意的是,单独使用 type="number" 时候, iOS 上出现并不是九宫格的数字键盘,如果需要九宫格的数字键盘,可选择使用 2、3 的方法。 1、2、3 在 Android 上均可以唤起九宫格的数字键盘

问题:搜索时,键盘的回车按钮文字设定为“搜索”

解决: input 使用 type="search",放在 form 表单内。两者结合就能使输入法中的回车按钮文字变为“搜索”

<form action="">
<input type="search" />
</form>

问题:iframe 在 iOS 上没有滚动条,直接撑出去

解决:给 iframe 外嵌套一个 div, 为这个 div 设置固定高度与 overflow

<div>
<iframe src=""></iframe>
</div>
div{
height: 100px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

移动端HTML5开发问题汇总-样式篇的更多相关文章

  1. 移动端HTML5开发 选择方案

    如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个. 本文将会比较其中五个最佳的框架.每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择.此外,许多选项都 ...

  2. 移动端HTML5开发心得(转)

    1. iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮       解决办法: http://dwz.cn/CrwNz 2. ...

  3. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  4. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

  5. 《IM开发新手入门一篇就够:从零开发移动端IM》

        登录 立即注册 TCP/IP详解 资讯 动态 社区 技术精选 首页   即时通讯网›专项技术区›IM开发新手入门一篇就够:从零开发移动端IM   帖子 打赏 分享 发表评论162     想开 ...

  6. 转---移动端 h5开发相关内容总结——CSS篇

    作者:伯乐在线专栏作者 - zhiqiang21 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 meta ...

  7. 移动端 h5开发相关内容总结——CSS篇

    1.移动端开发视窗体的加入 h5端开发以下这段话是必须配置的 <meta name="viewport" content="width=device-width, ...

  8. javacv教程文档手册开发指南汇总篇

    本章作为javacv技术栈系列文章汇总 前言 写了不少关于javacv的文章,不敢说精通 ,只能说对javacv很熟悉.虽然偶尔也提交pull request做做贡献,但是javacv包含的库实在太多 ...

  9. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

随机推荐

  1. mysql<七>

    -- ########## 01.集合逻辑 ########## -- MySQL中,只实现了一种集合逻辑:逻辑与,有两种用法:UNION 和 UNION ALL -- 临时表1 CREATE TAB ...

  2. Zabbix4.x安装部署

    zabbix监控的重要性就不用再赘述了.直接上干货. 1.环境背景: Linux:CentOS 7.x, Database:MySQL zabbix server 和 zabbix mysql 安装在 ...

  3. linux-ssh加密与https安全-9

    非对称加密算法:RSA,DSA/DSS 对称加密算法:AES,RC4,3DES HASH算法:MD5,SHA1,SHA256 hash就是找到一种数据内容和数据存放地址之间的映射关系 (1) 文件校验 ...

  4. php+html5实现无刷新上传,大文件分片上传,断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  5. Android使用SDKManager下载SDK速度慢 容易丢包和异常的解决办法

    第一步, SDK Manager启动之后,会先解析一些google的xml文件,会在Log里面打印出一些日志信息. 解析完之后,把日志全部拷贝到一个记事本里(这一步是因为日志窗口不支持查找),在里面查 ...

  6. BZOJ 1859 Luogu P2589 [ZJOI2006]碗的叠放 (计算几何)

    woc, 13年前的ZJOI就这么毒瘤的嘛... 题目链接: (bzoj)https://www.lydsy.com/JudgeOnline/problem.php?id=1859 (luogu)ht ...

  7. python学习之路(25)

    继承和多态 在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base clas ...

  8. Http协议:客户端提交数据给服务端和从服务端获得数据,像WebView也是向百度的服务端发出一条Http请求,服务端返回HTML页面,客户端(浏览器)解析后展示出页面

    提交数据和获得数据的方式有很多,这里介绍一种,使用HttpURLConnection来向服务器提交数据或者获得数据. 获得数据: //传入网址,获得请求网页数据(XML文件数据或JSON文件数据) p ...

  9. 快速排序和二分查找(Javascript)

    var data = [8, 3, 4, 1, 18, 22, 11, 3, 5, 6, 2, 1, 77] quickSort(data, 0, data.length - 1) console.l ...

  10. 项目三、文件上传器v1.1

    /** * 自定义文件上传工具 v1.1 * @param url 路径 */ function fileUploader(url) { var _date = new Date(); //日期 th ...