web前端 —— 移动端知识的一些总结
一.css部分
1.meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。
关于 initial-scale=1 ,这个参照iphone5的尺寸320568,如果你页面按照6401136做的话,scale就设为0.5
<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
里的滚动如丝般顺滑:-webkit-overflow-scrolling:touch
;
4.去除button
在ios
上的默认样式
-webkit-appearance: none;
border-radius: 0
5. placeholder
元素样式的修改
input::-webkit-input-placeholder{color:red;}
input:focus::-webkit-input-placeholder{color:green;}
6.不想让按钮touch
时有蓝色的边框或半透明灰色遮罩(根据系统而定)
-webkit-tap-highlight-color:rgba(0,0,0,0);
7.在移动端做动画效果的话,如果通过改变绝对定位的top
,或者margin
的话做出来的效果很差,很不流畅,而使用css3
的transition
、transform
或者animation
的效果将会非常棒(这一方面IOS
比android
又要好不少)。 如果用**3d(translate3d)
来实现动画,会开启GPU
加速,动画会更加流畅,但硬件配置差的安卓用起来会耗很多性能
8.使用图片时,会发现图片下总是有大概4px
的空白,(原因据说图片是inline,触发baseline什么的。。。)常用解决方法有
img{display:block};
img{vertical-align:top}
也可取其他几个值,视情况而定
9.关于使用弹性盒子box
布局 暂时有三种方案:
display:-webkit-box; // 早期的版本
display:-webkit-box-flex; // 过渡版本
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;
}
要想三个li
元素平分box
的宽度,width:0
是关键(在这个坑里陷了好久,直到偶然的一次设置了width:0
突然就好了,后来在天猫上也看到了同样的设置width:0
)
10.使用a
标签的话,尽量让a
标签block
,尽量让用户可点击区域最大化
11.对两个div
使用了transform
之后,div
下的z-index
有时就会失效,我遇到过,但没去认真探究,只是把z-index
提高就好了
12.在iOS
中,当你点击比如input
准备输入时,虚拟键盘弹出,整个视窗的 高度 就会变为 减去键盘 的高度,加入你在底部有fixed
的元素比如btn
,这个元素就会跑上来,一般都不会太美观。我是当focus
时就把它设为absolute
,视情况而定,也有比如显示一个新的层,将含有fixed
按钮的那一层隐藏的情况等等。 另外一种情况(一般在页面内容很少时iphone5
及以上常发生),当输入框弹出时fixed
元素挤到输入框上,当输入框消失时,fixed
元素并没有随着输入框的消失而回到底部,这是因为整个视窗的高度还保持在 减去键盘的 高度,需要手动去触发让视窗高度回到正常,然后试了很多方法都没成功,后来的方案是输入框消失时给页面加隐形的很大的padding
比如1000px
并在30ms
后改为正常
13.禁止用户选中文字-webkit-user-select:none
14.当把input
设为width:100%
时,有时可能会遇到input
的宽度超出了屏幕,这时可对input
加一个属性box-sizing:border-box
关于box-sizing:border-box
,此属性是把边框的宽度和padding
包含在盒子的高宽中,假如你设置两个元素float
且各占50%
,又都有border
时,用这个属性就可以完美地让它们能显示在同一行
15.做一个方向箭头比如 “>” 时,可以用一个正方形的div
,设置border:1px1px00
;然后rotate(45deg)
,这样就省去了一个图片
16. CSS
权重:style
是1000
,id
是100
,class
是10
,普通如li
、div
和伪类是1
,通用如*
是0
;
17.使用rem
时,设某个div
比如的height:3rem;line-height:1.5rem;overflow:hidden;
时,在某些android
手机上可能会出现显示不止两行,第三行会显示点头部。 解决:利用js
获取文字line-height
再去设置div
高度
18.使用background
时,background-position
里使用了比如center left
后不能再加具体的数值去定位,比如center10pxleft
(暂时兼容性差)
19.使用rem
布局时,由于webkit
支持的最小字体大小是12px
,所以使用html
使用62.5%
实际是12px
,这样很难计算,我的做法是设置成625%
即100px
,然后1rem
就相当于100px
20.移动端字体使用font-family:Helvetica,sans-serif
;我看这也是天猫使用的
21.在iphone
原生键盘上用keyup
统计字符数时,系统不会自动监控你选择文字的事件,比如打了多个拼音,可能选择的实际文字比输入的字符数多或者少,但无法在用户确定自己的输入时监控到keyup
(其他事件也一样)判断字符数。 改成input
事件就可以了
22.实现毛玻璃效果,透过背景看其他元素模糊,自身元素不模糊。
-webkit-backdrop-filter: saturate(180%) blur(20px);
background: rgba(0,0,0,0.5);
这个效果暂时只有IOS9
上的safari
可以。 用css3
的blur
效果的话,是整层元素全部模糊,而透过模糊层看其他的元素不模糊
23.如果需要展示小于12px
的文字,用transform:scale(%)
;它将元素缩小,但本身应该占的空间并不会变小,所以比如要元素居左对齐的话,还需设置translateX
24.在移动端对input
框使用disabled
属性,会导致元素里面value
值在页面上被隐藏看不见,可以对元素使用css3
效果pointer-event:none
,意思就是此元素对鼠标事件无效
二.js部分
1.如果使用jquery
绑定touch
事件的话,获取touchstart
,touchmove
的触点坐标用e.originalEvent.targetTouches[0].pageX
,获取touchend
则用e.originalEvent.changedTouches[0].pageX
2.利用style
获取获取transform
的rotate
值
parseInt(/rotateX\((.*?)\)/.exec(getALL.style.webkitTransform)[1])
如果页面一开始没有`style`值,`rotate`是写在`CSS`里的,需要用到`getComputedStyle`,具体请看[这里][5]
3.有些版本的 iphone4
中, audio
和 video
默认播放事件不会触发,比如使用 window.onload
或计时器等都不能触发播放,必须用 JS
写事件让用户手动点击触发才会开始播放,比如
$(document).one('touchstart',function(){
audio.play();
})
4.想要在 touchmove:function(e,参数一)
加一个参数,结果直接使用 e.preventDefault()
就会 e
报错,处理方法为
touchmove:function(e,参数一){
var e=arguments[0]
e.preventDefault()
}
5.移动端的一些小页面可能没必要用到 zepto.js
这些工具库,就可以使用一些新一点的 api
,比如选取元素用 querySelector(".class #id")
和 querySelectorAll(".class element")
,操作 class
可以用 classList
6.点击一个元素时,使用 touchstart
会立即触发,而使用 click
则用有大概 0.3s
的延迟 想模拟一个立即触发的点击事件有两种方法, fastclick.js
和 zepto.js
里的 tap
事件。
不过 zepto
的 tap
事件有一个事件穿透的问题。假如你 tap
一个弹出层元素(这个元素遮罩了一个 a
标签),这个元素立即消失,这样由于上述的 0.3s
延迟 tap
事件就会传递给 a
标签成 click
事件造成a标签跳转。 以上面的例子来说,解决方案视情况而定:
① tap
时让遮罩渐隐消失,这个过程超过 400ms
就不会穿透到下一层去了
② 在 touchend
事件回调中加入 preventDefault
, 并在下一层中加上 pointer-events:none
。(这个没用过)
③ 有的时候比如弹出一个 iphone
上滑动出来的层,点击黑色半透明区域弹出层消失,这种可以在黑色区域绑定 touchend
也是和 tap
差不多的效果
7.当弹窗出现时,想禁止屏幕的滑动,给那个遮罩层添加 touchmove
事件即可,用 e.preventDefault()
会阻止的 scroll
, click
等事件,消失时再 off
掉,
$(".body_cover").on("touchmove", function(e) {
e.preventDefault();
});
8.使用 input file
上传文件时,可以指定接受的类型, accept="image/png,image/jpeg,image/gif"
,同时在 android
上默认不能使用相机,可以加 capture="camera"
同时,由于原生的样式不好看,可以通过设置input的display:none,然后使用id.click()去触发input元素的点击。
9.给元素加:active伪类时,如果要求高,兼容性好的话,就得用js监控touchstart然后加相应的class
$(document).on("touchstart", function(e) {
var target = $(e.target);
if (target.hasClass("is_hover")) {
target.addClass("hover_css");
}
});
三、微信部分
1.判断是否来自微信浏览器
function isFromWeiXin() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;}return false;
}
2.判断手机的类型
var user="";
if (/android/i.test(navigator.userAgent)){// androiduser="1";
}
if (/ipad|iphone|mac/i.test(navigator.userAgent)){// iosuser="0";}
3.如果在网页里嵌套一个iframe
,src
为其他的网址等,当在微信浏览器打开时,如果iframe
里的页面过大,则iframe
的src
不能加载(具体多大不知道,只是遇到过)。
4.微信jssdk
里预览图片接口,图片的url
不能填base64
编码,ios
上会很卡,估摸着微信得卡个5
秒左右才打得开,而android
上压跟就卡住或者一直卡在读取图片界面
5.微信当在输入框里输入消息时,会提示警示框不要输入qq密码等,这个可以在公众平台的功能设置的业务域名设置
6.微信里假如页面一使用ajax
获取数据,当你进入下一页面再按返回键返回页面一的时候,有些情况不会去请求ajax
数据,会使用缓存,然而ajax
来的数据又并没有存在缓存里。要设置cache:false
(iphone、android的某些手机都可能出现)
7.在微信js config
的时候,如果URL
的参数有如?a={"param":"1"}
,会导致签名失败。给参数用encodeURIComponent
编码后再传过去也是失败!研究了好久。(后台代码没做任何修改,只在我前端修改代码)。所以最后还是使用了?param=1
这样的格式
web前端 —— 移动端知识的一些总结相关推荐
- web前端 — 移动端知识的一些总结
一.css部分 1.用transition做动画时,变形尽量通过transform来实现,而不是用height,width等属性.transform可明显减少重绘.重画 meta标签 <meta ...
- web前端移动端项目测试的几种方法
web前端移动端项目测试的几种方法 本人只是个做前端刚刚半年的小白 技术还不熟练 见识也不够广 希望大家不喜勿喷 如果有不对的地方欢迎大家指出 我更加会努力的学习 提高自己的水平! 本人只是 ...
- 阿里云视频直播 web前端[移动端] Aliplayer的简单案例
阿里云视频直播 web前端[移动端] Aliplayer的简单案例 最近做了一个功能就是播放后台提供的各种直播视频,格式在未确定的情况下,刚开始以为简单的一个video标签就能播放视频,后面才发现各种 ...
- 千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作 文章目录 千锋教育Web前端--PC端企业类型整页制作 一.PC端的布局 二.源码 1.CSS源码 2.HTML源码 三.运行结果 一.PC端的布局 通栏 ...
- web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=r ...
- 好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
- web前端开发基础知识整理以及前端视频教程
随着移动互联网的发展和越来越多创业公司的加入,Web前端工程师的岗位空缺越来越大,薪资迅速上涨.Web前端工程师比以往更具有号召力. 想要自学成为炙手可热的Web前端工程师?靠零碎化的短视频可不行,你 ...
- web前端-移动端HTML5微商城项目实战分享案例
HTML5+css3移动端H5项目案例实战.web前端开发移动端webApp案例源码.H5爆款试客商城.手机商城网站实例源码模板!!! 主张原创设计,拒绝数量.追求质量,100 ...
- 网页编程从入门到精通 杨凡_干货 | web前端入门基础知识
一名合格的web前端工程师必须得掌握HTML.CSS和JavaScript. 只懂其中一个或两个还不行,你必须对这三门语言都很熟悉. 也不是说必须对这三门语言都非常精通,但你至少要能够运用它们完成大多 ...
最新文章
- dataframe构建
- 【转】.NET内存管理、垃圾回收
- linux fedora设置开机自动挂载win磁盘
- 【大数据教程】MapReduce基本架构、统计每个人三次考试成绩的最高分,统计每一个人花费的总流量、按地区,统计每一个人花费的总流量
- 算法训练营02-预备知识和时间复杂度分析
- Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)
- 信息学奥赛C++语言: 小明的步行
- 2、Zookeeper集群搭建、命令行Client操作
- Julia: Dates =DateFormat, format,parse.......
- python如何读取txt数据库_详解Python如何读取MySQL数据库表数据
- 中文版232测试软件,打印机、客显测试软件
- 网络安全学习资料总汇
- AT91SAM9260EK总是出现有RomBOOT提示但是却无法连接SAM-BA的方法
- mysql如何设置host_如何快速修改MySQL用户的host属性
- 如何将amr文件转成mp3格式?
- android 获取收到短信验证码,Android自动获取短信验证码
- Server-U 访问外网服务器指定端口(内网21端口,外网其他端口)
- 分析器错误消息: 无法执行程序。所执行的命令为 C:\Windows\Microsoft.NET\Framework\v4.0 \csc.exe/noconfig/fullpaths@C:\W
- 实现微信产品问题反馈群实时监控与问题自动录入(上)
- 常用的网站和在线工具
热门文章
- mysql防止索引崩溃_MySQL优化之避免索引失效的方法
- oracle rac应急_ORACLE紧急情况检查应急预案
- 增强for循环_增强for循环实际用法
- abs 不会整数 方法 溢出_在 Golang 中针对 int64 类型优化 abs()
- mysql 获取当月每一天_mysql获取从某个时间到今天的每一天的日期,以及笛卡尔积...
- linux删除缓存脚本,Linux 设置定时清除buff/cache的脚本
- php 将二维数组合并,PHP二维数组合并排重的两种方式
- 安装虚拟机Ubuntu,搭建lnmp环境碰到的坑(二)
- 用Pytorch给你的母校做一个样式迁移吧!
- 解决Xshell 连不上ubuntu系统