1、移动端点击a标签出现的背景色

 a,
a:hover,
a:active,
a:visited,
a:link,
a:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
outline: none;
}

2、对于超出div范围的内容进行省略号(...)显示

  2.1、单行显示

div{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

  2.2、多行显示

div{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:;//可以输入你想要的行数
display: -webkit-box;
-webkit-box-orient: vertical;
}

   2.3、正常情况下是没有问题的,但是如果你对你的代码进行webpack打包,可能就会出现打包后-webkit-box-orient: vertical;消失了,这个时候就需要这样实施了:

 /* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

如果你使用的是webpack自带的打包配置,则需要注释掉webpack.prod.conf.js中的如下插件

  new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),

并且在util.js中的如下部分加入minimize:true

const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
minimize: true
}
}

这样在生产环境中打包的css也会压缩,并且使那个样式消失。

3、百度禁止转码

通过百度打开网页时,百度可能会对你的网站进行转码,往你页面上添加广告之类的,我们可以通过meta标签来禁止它:

<meta http-equiv="Cache-Control" content="no-siteapp" />

4、设置状态栏的背景颜色(IOS)

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 

content参数:

  • default: 状态栏背景是白色
  • black:状态栏背景是黑色
  • black-translucent:状态栏背景是半透明。如果设置为default或者black,网页内容从状态栏底部开始。如果设置为black-translucent,网页内容充满整个屏幕,顶部会被状态栏遮挡。

5、h5页面窗口自动调整到设备宽度,并且禁止缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • width:设置viewport的宽度,为一个正整数,或者一个字符串‘device-width’
  • height:设置窗口高度,一般设置了宽度,会自动解析出高度,可以不用设置
  • initial-scale:默认缩放比例,为一个数字,可以带小数
  • minimum-scale:允许用户最小缩放比例,为一个数字,可以带小数
  • maximum-scale:允许用户最大缩放比例,为一个数字,可以带小数
  • user-scalable:是否允许手动缩放

6、可隐藏地址栏(IOS)

<meta name="apple-mobile-web-app-capable" content="yes" />

7、移动端手机号码识别(IOS)

在IOS Safari上会对那些看起来像是电话号码的数字处理为电话链接,我们可以通过meta来关闭对电话号码的自动识别:

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

在页面中标签实现打电话

<a href="tel:0755-10086">打电话给:0755-10086</a>

发短信

<a href="sms:123456">123456</a> 

8、移动端邮箱识别(Android)

在安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下meta来管理邮箱的自动识别:

<meta content="email=no" name="format-detection" /> 

邮件的实现方法:

//1.普通邮件
<a href="mailto:826248794qq.com">点击我发邮件</a>
//2.收件地址后添加?cc=开头,可添加抄送地址(Android存在兼容问题)
<a href="mailto:826248794@qq.com?cc=zengfp@yeah.net">点击我发邮件</a>

9、优先使用最新版本IE和Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

10、表单输入框上的placeholder的颜色值得改变

input::-webkit-input-placeholder{color:#ff1234;}
input:focus::-webkit-input-placeholder{color:#ff1234}

11、禁止文本缩放

当移动设备横竖屏切换时,文本的大小会重新计算,进行相应的缩放,如果你不需要这样,可以选择禁止。在pc端该属性已经被移除,若该属性要在移动端生效,必须设置meta viewport

html {
   -webkit-text-size-adjust: 100%;
}

12、移动端禁止选中内容

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

13、禁止保存或者拷贝图片(IOS)。当在手机上长按图片img,会弹出选项保存图片或者拷贝图片,如果你不想用户这样操作,你可以设置以下样式禁止

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

14、audio元素和video元素在ios和android中无法自动播放。我们可以设置触屏即播

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

15、手机拍照和上传图片的<input type="file" />的accept属性

<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">

16、消除transition闪屏

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

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

div{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

18、关闭IOS键盘首字母自动大写。

<input type="text" autocapitalize="off" />

19、解决字体在移动端比例缩小后出现锯齿的问题

-webkit-font-smoothing: antialiased;

未完待续.......

移动端h5需要注意的一些事的更多相关文章

  1. 移动端H5活动页优化方案

    背景 项目:移动端H5电商项目 痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下 ...

  2. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  3. web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址

    web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址   Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...

  4. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  5. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  6. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  7. [转]:移动端H5页面高清多屏适配方案

    原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...

  8. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  9. 移动端H5制作安卓和IOS的坑 持续更新...

    移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...

随机推荐

  1. linux basic ------ shell

    一般习惯把 shell 脚本语言和 shell 解释器统称为 shell,用 shell 脚本语言编写的程序简称脚本. shell 解释器 是用 c 语言写一个应用程序,它是用户使用 Unix / L ...

  2. pyspider框架的599证书问题

    使用PySpider 框架出现错误 HTTP 599: SSL certificate problem: unable to get local issuer certificate,如下 HTTP ...

  3. Nginx利用lua剪辑FastDFS图片

    Nginx利用lua剪辑FastDFS中的图片 我们经常用FastDFS来做图片服务器,通过nginx来上传或者获取图片.本文要实现的功能是,当客户端要获取不同尺寸的图片是,lua根据url中的尺寸大 ...

  4. BFS简单题套路_Codevs 1215 迷宫

    BFS 简单题套路 1. 遇到迷宫之类的简单题,有什么行走方向的,先写下面的 声明 ; struct Status { int r, c; Status(, ) : r(r), c(c) {} // ...

  5. Spring Cloud(十二)声名式服务调用:Feign 的使用(下)

    前言 本文是对上一篇博文的扩充,很多平时用不到的特性就开始简略一写,Spring Cloud各版本之间的差距很大的,用不到的可能下一个版本就被kill掉了.由于笔者写本文开始的时候误解了Feign的继 ...

  6. 总有一些实用javascript的元素被人遗忘在角落-slice

    slice() 方法可从已有的数组中返回选定的元素. 好吧,我承认我竟然把它忘了! 这次我在回顾一下它 语法 arrayObject.slice(start,end) 数组.slice(起始,结束) ...

  7. HDU 4627 The Unsolvable Problem 杭电多校联赛第三场1009 数学题

    题意描述:给出一个n,要求在所有满足n = a+b的a和b里面求a和b的最小公倍数最大的两个数的最小公倍数. 解题报告:比赛的时候看到这个题的第一反应就是寻找这两个数一定是在a和b比较接近的地方找,这 ...

  8. 第9月第30天 MVP

    1. import UIKit struct Person { // Model let firstName: String let lastName: String } protocol Greet ...

  9. 【CTF WEB】服务端请求伪造

    服务端请求伪造 如你所愿,这次可以读取所有的图片,但是域名必须是www开头 测试方法 POST /index.php HTTP/1.1 Host: 218.2.197.236:27375 Conten ...

  10. [原创]jQuery Validation范例

    上班无事,学习jQuery Validation,于是手写一公共范例,并收藏以便后用 验证操作类formValidatorClass.js }); 测试页index.html         * {} ...