Macro Da

每天学一点,成长多一点!

移动端H5的常用知识点

1.meta标签

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>  <!-- 自适应 -->
<meta content="yes" name="apple-mobile-web-app-capable">  <!-- IOS中safari允许全屏浏览 -->
<meta content="black" name="apple-mobile-web-app-status-bar-style">  <!-- IOS中Safari顶端状态条样式 -->
<meta content="telephone=no" name="format-detection">  <!-- 忽略将数字变为电话号码 -->
<meta content="email=no" name="format-detection">  <!-- 忽略识别email -->

 

2.图片尺寸:做全屏显示的图片时,尺寸为640*960

 

3.去除webkit的滚动条

element::-webkit-scrollbar{display: none;}
/*如果要去除全部的,就把 element去掉,同时这个属性可让在 div里的滚动如丝般顺滑:*/
div{-webkit-overflow-scrolling : touch;}

4.去除button在ios上默认样式

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

5.placeholder元素样式的修改

input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}

6.不想让按钮 touch时有蓝色的边框或半透明灰色遮罩(根据系统而定)

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

7.移动端动画性能

在移动端做动画效果的话,如果通过改变绝对定位的 top,或者 margin的话做出来的效果很差,很不流畅,而使用 css3的 transition、 transform或者 animation的效果将会非常棒(这一方面 IOS比 android又要好不少)。 如果用 **3d(translate3d)来实现动画,会开启 GPU加速,动画会更加流畅,但硬件配置差的安卓用起来会耗很多性能。

 

8.去除图片的外边距

使用图片时,会发现图片下总是有大概 4px的空白,个人觉得图片是inline(行内元素),在代码里带有空格或换行就会产生空白,解决方法有

img{display: block;}
img{vertical-align:top;}

9.关于使用弹性盒子 box布局 暂时有三种方案:

div{ display:-webkit-box; }       /* 早期的版本 */
div{ display:-webkit-box-flex; }  /* 过渡版本   */
div{ display:-webkit-flex; }      /* 最新的版本 */

我暂时使用的是 display:-webkit-box;暂时只有这个的兼容性最好, flex是最好用,还可以如 float一样排多个元素时自动换行,只是兼容性还太差,(即使是第一种,在火狐下兼容性也不是很好) 对于第一种常见用法是:

<ul class="box">
	<li class="box_flex">1</li>
	<li class="box_flex">2</li>
	<li class="box_flex">3</li>
</ul>
.box {
	display: -webkit-box;
	-webkit-box-align: center;  /*设置里面的元素垂直居中 */
	-webkit-box-pack: center;  /* 设置水平居中 */
}

.box .box_flex1 {
	box-flex: 1;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	display: block;
	width: 0;
}<span id="mce_marker" data-mce-type="bookmark" data-mce-fragment="1">​</span>

要想三个 li元素平分 box的宽度, width:0;是关键(在这个坑里陷了好久,直到偶然的一次设置了width:0;突然就好了,后来在天猫上也看到了同样的设置 width:0;)

 

10.使用a标签的话,尽量让a标签 block ,尽量让用户可点击区域最大化

 

11.对两个div使用了 transform之后, div下的 z-index有时就会失效,我遇到过,但没去认真探究,只是把 z-index提高就好了

 

12.输入文字时键盘弹出,input位置异常

在 iOS中,当你点击比如 input 准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有 fixed的元素比如 btn,这个元素就会跑上来,一般都不会太美观。我是当 focus时就把它设为 absolute,视情况而定,也有比如显示一个新的层,将含有 fixed按钮的那一层隐藏的情况等等。 另外一种情况(一般在页面内容很少时 iphone5及以上常发生),当输入框弹出时 fixed元素挤到输入框上,当输入框消失时, fixed元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在 减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的 padding比如 1000px并在 30ms后改为正常

 

13.禁止用户选中文字

body{-webkit-user-select:none;}

14.当把 input设为 width:100%时,有时可能会遇到 input的宽度超出了屏幕,这时可对 input加一个属性

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* 页面所有元素设置为这个更便捷输出。 */

关于 box-sizing:border-box,此属性是把边框的宽度和 padding包含在盒子的高宽中,假如你设置两个元素 float且各占 50%,又都有 border时,用这个属性就可以完美地让它们能显示在同一行

 

15.制作方向箭头图标

做一个方向箭头比如 “>” 时,可以用一个正方形的 div,设置 border:1px 1px 0 0;然后 rotate(45deg),这样就省去了一个图片

CSS权重:style是 1000, id是 100, class是 10,普通如 li、 div和伪类是 1,通用如 *是 0;

 

17.rem与行高

使用 rem时,设某个div比如的 height:3rem;line-height:1.5rem;overflow:hidden;时,在某些 android手机上可能会出现显示不止两行,第三行会显示点头部。 解决:利用 js获取文字 line-height再去设置 div高度,或者

<meta name="wap-font-scale" content="no">

 

18.background-position兼容问题

使用 background时, background-position里使用了比如 center left后不能再加具体的数值去定位,比如 center 10px left(暂时兼容性差)

 

19.rem字体大小设置

使用rem布局时,由于webkit支持的最小字体大小是 12px,所以使用html的62.5%实际是 12px,这样很难计算,我的做法是设置成625%即 100px,然后1rem就相当于100px

 

20.移动端字体使用

body{font-family: sans-serif;}  /*参考移动端淘宝*/

21.iphone统计字数

在 iphone原生键盘上用keyup统计字符数时,系统不会自动监控你选择文字的事件,比如打了多个拼音,可能选择的实际文字比输入的字符数多或者少,但无法在用户确定自己的输入时监控到 keyup(其他事件也一样)判断字符数。 改成 input事件就可以了

 

22.实现毛玻璃效果,透过背景看其他元素模糊,自身元素不模糊。

div {
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	background: rgba(0, 0, 0, 0.5);
}

这个效果暂时只有 IOS9上的 safari可以。 用 css3的 blur效果的话,是整层元素全部模糊,而透过模糊层看其他的元素不模糊

 

23.文字小于12px

如果需要展示小于 12px的文字,用transform:scale(%);它将元素缩小,但本身应该占的空间并不会变小,所以比如要元素居左对齐的话,还需设置 translateX 24.在移动端对 input框使用 disabled属性,会导致元素里面 value值在页面上被隐藏看不见,可以对元素使用 css3效果 pointer-event:none,意思就是此元素对鼠标事件无效

点赞

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注