Fork me on GitHub 盒子
盒子
文章目录
  1. 前言
  2. 实用的一些key
    1. meta标签
    2. Html5+Css3的使用
    3. 块级化a标签
    4. 自适应布局
    5. 适当优雅降级
    6. 字体大小与行间距
    7. IOS在第三方输入法下不支持onkeyup事件
    8. 部分android系统中元素被点击时产生的边框怎么去掉
    9. winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
    10. webkit表单元素的默认外观怎么重置
    11. 移动端如何清除输入框内阴影
    12. 移动端禁止选中内容
    13. 移动端取消touch高亮效果
    14. 如何禁止保存或拷贝图像(IOS)
    15. 屏幕旋转的事件
    16. audio元素和video元素在ios和andriod中无法自动播放
    17. 手机拍照和上传图片
    18. 消除transition闪屏
  3. 移动端border-radius的几个BUG
    1. Android 2.3 自带浏览器不支持 %
    2. Android 及 Safari 低版本 img 圆角问题
    3. Android 4.2.x 背景色溢出及不支持 border-radius 缩写
    4. 其他问题

移动端前端开发入门总结

前言

做了快半个月的移动端开发了,就移动端前端开发来做一个小小的总结,希望能帮助新人更快入门。

实用的一些key

meta标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话,忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 适应移动端end -->

Html5+Css3的使用

因为手机大多数都是高级浏览器,HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验,可以减少开发者很多的工作量,当然了你决定使用HTML5前,一定要对此非常熟悉,要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签,定义导航条或选项卡可以直接使用nav标签等等。

按钮带有圆角效果,有内发光效果还有高光效果,这样的按钮使用CSS3写是无法写出来的,当然圆角可以使用CSS3来写,但高光和内发光却无法使用CSS3编写,这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性。

还有渐变,动画等你能够想象出的各种酷炫狂拽吊炸天的效果。

块级化a标签

因为大多数都是触屏手机,要让用户很方便的能点击到标签,建议用42X42。操作对象的大小符合手指的操作,按键的大小设置规范:食指点击的间距 约为77 mm, 1mm间距,拇指点击88 mm,2mm间距。当前推荐的值为9mm 大小,最小应不小于7mm。

自适应布局

在编写CSS时,我不建议前端工程师把容器(不管是外层容器还是内层)的宽度定死。为达到适配各种手持设备,我建议前端工程师使用自适应布局模式(支付宝采用了自适应布局模式),因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示,你无需再次考虑设备的分辨率。页面必须自适应屏幕大小,可以采用流体布局。其它一些小问题可以采用media query,比如对于图片的处理,只要设置宽度,让图片自适应,防止图片变形,当然要兼容的设备分辨率差距很大的时候,需要利用media queries根据分辨率的不同加载不同的图片(需要同一张设置为几种不同的规格),一是防止小分辨率设备加载大图片浪费流量,二是防止大分辨率设备加载小图片导致的图片模糊问题。

适当优雅降级

要做好优雅降级(平稳退化),少用JS,图片,要用户禁止下载JS和图片的时候页面也能体现价值(因为很多APP默认设置为3G下是不自动下载图片等资源的)。

字体大小与行间距

不建议使用px/em,而使用rem,虽然它是相对单位,但使用rem单位可以避开很多层级的关系而行间距则直接是采用字体的倍数。为了方便计算,在html元素中常将font-size设为62.5%。注意在chorme是会强制等于12的~

IOS在第三方输入法下不支持onkeyup事件

1
2
3
4
// 使用oninput进行代替onkeyup事件
$("#user-name")[0].oninput = function() {
that.checkusername();
};

部分android系统中元素被点击时产生的边框怎么去掉

android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

1
2
3
4
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}

-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符

另外,有些机型去除不了,如小米2

对于按钮类还有个办法,不使用a或者input标签,直接用div标签

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

1
<meta name="msapplication-tap-highlight" content="no">

webkit表单元素的默认外观怎么重置

1
.css{-webkit-appearance:none;}

移动端如何清除输入框内阴影

在iOS上,输入框默认有内部阴影,但无法使用 box-shadow 来清除,如果不需要阴影,可以这样关闭:

1
2
3
4
5
input,
textarea {
  border: 0; /* 方法1 /
  -webkit-appearance: none; / 方法2 */
}

移动端禁止选中内容

1
2
3
4
5
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all /
-moz-user-select: none; / Firefox all (移动端不需要) /
-ms-user-select: none; / IE 10+ */
}

移动端取消touch高亮效果

在做移动端页面时,会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素,默认都会在激活状态时,显示高亮框,如果不想要这个高亮,那么你可以通过css以下方法来进行全局的禁止:

1
html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

但这个方法在三星的机子上无效,有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签,可以解决这个问题。

如何禁止保存或拷贝图像(IOS)

通常当你在手机或者pad上长按图像 img ,会弹出选项 存储图像 或者 拷贝图像,如果你不想让用户这么操作,那么你可以通过以下方法来禁止:

1
img { -webkit-touch-callout: none; }

屏幕旋转的事件

window.orientation,取值:正负90表示横屏模式、0和180表现为竖屏模式;

1
2
3
4
5
6
7
8
9
10
11
window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("横屏:" + window.orientation);
case 0:
case 180:
alert("竖屏:" + window.orientation);
break;
}
}

audio元素和video元素在ios和andriod中无法自动播放

应对方案:触屏即播

1
2
3
$('html').one('touchstart',function(){
audio.play()
})

手机拍照和上传图片

1
2
<input type=file accept="image/*">
<input type=file accept="video/*">

使用总结:

  • ios 有拍照、录像、选取本地图片功能
  • 部分android只有选取本地图片功能
  • winphone不支持
  • input控件默认外观丑陋

消除transition闪屏

1
2
3
4
5
6
.css{
/设置内嵌的元素在 3D 空间如何呈现:保留 3D/
-webkit-transform-style: preserve-3d;
/(设置进行转换的元素的背面在面对用户时是否可见:隐藏)/
-webkit-backface-visibility: hidden;
}

开启硬件加速,解决页面闪白,保证动画流畅

1
2
3
4
5
6
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

设计高性能CSS3动画的几个要素

  • 尽可能地使用合成属性transform和opacity来设计CSS3动画,
  • 不使用position的left和top来定位
  • 利用translate3D开启GPU加速

移动端border-radius的几个BUG

Android 2.3 自带浏览器不支持 %

通常我们实现一个正圆只需要border-radius: 50%即可,大致代码如下

1
2
3
4
5
6
.foo {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid blue;
}

然而 Android 2.3 是不支持百分比的,要兼容我们只能使用一个较大值,比如border-radius: 999px;

Android 及 Safari 低版本 img 圆角问题

当 img 元素有border 时设置border-radius 会导致圆角变形,需要在img 外面嵌套一个元素并设置border 和border-radius。

Android 4.2.x 背景色溢出及不支持 border-radius 缩写

Android 4.2.x 背景色溢出

测试发现,在 Android 4.2.x 系统自带浏览器中,同时设置border-radius,border和背景色的时候,背景色会溢出到圆角以外部分,可以使用背景剪裁background-clip: padding-box;来修复,但是如果border-color为半透明时,背景直角部分依然会露出来

Alt text

关于背景剪裁background-clip

background-clip: border-box|padding-box|content-box;

描述
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

Android 4.2.x 不支持border-radius缩写

这个 BUG在小米上测试并未发现,国外有人反映三星 Galaxy S4 中自带浏览器不支持。

解决方案就是使用border-radius的四个扩写属性,缩写属性放到最后。

以上两个问题影响到 Android 4.2.x 内核的系统以及在其基础上定制的系统的自带浏览器,比如:红米,小米3,阿里云OS 等,安卓版 Chrome 不受影响。

完整代码应该是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
.foo {
width: 100px;
height: 100px;
border: 5px solid blue;
border-top-left-radius: 999px; /* 左上角 */
border-top-right-radius: 999px; /* 右上角 */
border-bottom-right-radius: 999px; /* 右下角 */
border-bottom-left-radius: 999px; /* 左下角 */
border-radius: 999px;
background-color: #ccc;
background-clip: padding-box;
}

用box-shadow模拟边框

背景色溢出另一个解决办法就是使用box-shadow模拟border;差不多可以达到效果

1
2
3
border: 1px solid #333333;
/*替换为*/
box-shadow: 0 0 1px 1px #333333;

其他问题

  • IE9 中fieldset元素不支持border-radius。
  • IE9 中带有背景渐变(gradient)的时候背景溢出。

如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen