WEB前端娃steiny 2019-06-28
本文档针对移动前端开发,包括 Hybrid 里面的web页面,非 Native 应用。
所有经验适用于:iOS6.0+, Android4.0+
如果你想使用元素的伪类来实现 按下激活 状态,那么你需要知道以下问题:
iOS上的几乎任何浏览器输入框(input, textarea)默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:
input, textarea { /* 方法1: 去掉边框 */ border: 0; /* 方法2: 边框色透明 */ border-color: transparent; /* 方法3: 重置输入框默认外观 */ -webkit-appearance: none; appearance: none; }
手机在 Android Browser4.4.2 上(其他版本未测),如果你使用了 border-radius,并且使用了 -webkit-transform 属性,当使用了 translatez 或者 translate3d 值,圆角会出现问题:
.test { border: 2px solid red; width: 50px; height: 50px; border-radius: 50%; background-color: gray; box-shadow: 0 2px 5px rgba(0, 0, 0, .3); -webkit-transform: translate(0, 0) translatez(0); transform: translate(0, 0) translatez(0); }
<div class="test"></div>
如上代码,-webkit-transform: translate(0, 0) translatez(0) 将会导致圆角无法包裹住 background-color。
当然,-webkit-transform: translate3d(0, 0, 0) 也是一样的,所以如果你的某个场景是这样的,那么可以直接使用 -webkit-transform: translate(0, 0) 来避免这个问题
在红米和OPPO等手机某些版本的 Android Webview 中,如果一个元素定义了 border + border-radius,这时如果该元素有背景,那么背景将会溢出圆角之外。
之所以会出现这个问题:其主要原因是因为CSS对背景裁剪(background-clip)有不同的处理方式,通常它可以是 border-box | padding-box | content-box 这3种方式。
浏览器的默认裁减方式是 border-box,即溢出 border 之外的背景都将被裁减。
对于上述无法裁减边框之外背景的手机,将值定义为 padding-box | content-box 都能fix这问题,不过更推荐使用 padding-box。因为使用 content-box,如果定义了 padding 不为 0,背景将无法铺满元素。
在移动平台上开发时,用CSS画一个圆很简单,只需要一句代码:
.circle { border-radius: 50%; }
不过,在 Android Browser2.* 上,这个定义将会失效,而显示为默认的矩形。
因为 Android Browser2. 不支持以 百分比 作为 border-radius 的值,所以如果你需要兼容 Android Browser2.,那么你可以这样:
.circle { width: 10rem; height: 10rem; border-radius: 5rem; }
如果你觉得这样定义不够灵活,想懒一点,那么其实可以给 border-radius 预设一个比较大的值,比如 100rem,用以避免当元素的尺寸变了,圆角半径也得跟着变,除非元素的尺寸超出了你预设的阀值。
当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,当我们不需要这种情况时,可以选择禁止:
html { -webkit-text-size-adjust: 100%; }
<7>邮箱地址识别
在 Android (iOS不会)上,浏览器会自动识别看起来像邮箱地址的字符串,不论有你没有加上邮箱链接,当你在这个字符串上长按,会弹出发邮件的提示。
关闭邮箱地址识别:
<meta name="format-detection" content="email=no" />
开启邮件发送:
<a mailto:[email protected]">[email protected]</a>
<8>如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:
img {
-webkit-touch-callout: none;
}
PS:需要注意的是,该方法只在 iOS 上有效
<9>移动端取消touch高亮效果
在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来禁止:
`.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}`
这个设置,在大部分机子上都是起效果的。但是,移动端三星自带浏览器,点击页面任意a标签时,设置-webkit-tap-highlight-color:rgba(0,0,0,0)还是会有阴影底色,这应该是浏览器强制加上去的,通过代码设置也无法覆盖。
有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。
<10>移动端禁止选中内容
如果你不想用户可以选中页面中的内容,那么你可以在css中禁掉:
div { -webkit-user-select: none; }
就这么简单,但是目前只支持webkit内核的浏览器。
今天先找这些明天继续;