meta 基础知识:
h5 页面窗口自动调整到设备的宽度,并禁止用户缩放页面
<meta name="viewport" content="width=device-width, initail-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no">
忽略Android 平台中对邮箱地址识别
<meta name="format-detection" content="email=no">
当网址添加到主屏幕快启动方式, 可以隐藏地址栏, 仅针对 ios 的Safari, ios 7.0 之后, Safari 已经看不到效果
<meta name="apple-mobile-web-app-capable" content="yes">
将网站添加到主屏幕快启动方式,仅针对 ios Safari
<meta name="apple-mobile-web-app-status-baar-style" content="black">
rem 的配置参考
html {
font-size: 10px;
}
@media screen and (min-width: 321px) and (max-width: 375px)
html {
font-size: 11px;
}
@media screen and (min-width: 376px) and (max-width: 414px)
html {
font-size: 12px;
}
@media screen and (min-width: 415px) and (max-width: 639px)
html {
font-size: 15px;
}
@media screen and (min-width: 640px) and (max-width: 719px)
html {
font-size: 20px;
}
@media screen and (min-width: 720px) and (max-width: 749px)
html {
font-size: 22.5px;
}
@media screen and (min-width: 750px) and (max-width: 799px)
html {
font-size: 23.5px;
}
@media screen and (min-width: 800px)
移动端 touch 事件(区分 webkit 和 winphone)
当用户手指放在移动设备上在屏幕上滑动会触发的 touch 事件
以下支持 webkit
touchstart 当手指触碰到屏幕是 发生,不管有多少手指
touchmove事件 单手指在屏幕上滑动, 通常我们滑动屏幕, 会调用 event 和 preventDefaultl来阻止默认时间, 阻止页面的滚动
touchend 当手指离开屏幕时
touchcancel 系统停止跟踪触摸时,会触发, 例如在触摸过程中突然页面中有一个 alert 此时会触发该该事件
touchEvent:
touches: 屏幕上所有手指的信息
targetTouches: 手指在目标区域的手指信息
changeTTouches: 最近一次触发该事件的手指信息
touchend: touches 与 targetTouches 信息会被删除,
changedTouches 保存最后一次i信息, 最好用于计算手指信息
参数信息(changedTouches[0])
clientX,ClientY 在显示区域的坐标
target: 当前元素
移动端 click 屏幕产生 200-300 ms 的延迟响应
移动设备上的web 网页有 300 ms 延时, 这样会造成按钮的点击无效
产生的原因是由于 ios 上的双击放大网页, 浏览器捕获第一次点击, 会等待 时间t, 如果没有下一次操作, 就会执行这次的点击
因为浏览器无法判断用户是双击还是单击
解决:
fastclick
zepto 的touch模块, tap 事件也是为了解决这个问题而来
触摸事件响应顺序:
touchstart, touchmove, touchend, click
什么是 retina 屏
是一种具有超高像素密度的液晶屏, 同样大小的屏幕上显示的像素点有一个 变为了 多个
iOS 系统中点击一个链接会产生一个半透明的灰色遮罩, 如果想要禁用,需要设置 -webkit-tap-highlight-color 的 alpha 值为 0; 也就是属性值的最后一位设置为 0 就可以去掉半透明的灰色遮罩;
部分 Android 机中元素点击时产生的边框怎么去掉
a, button, input, textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
webkit表单元素的默认外观怎么重置
.css {
-webkit-appearance: none;
}
// 修改 placeholder 样式
input:: -webkit-input-placeholder {
color: #000;
}
input::foucs -webkit-input-placeholder {
color: #000;
}
webkit 表单输入框 placeholder 文字能换行么?
ios 可以实现, 但是 Android 不能, 但是 textarea 标签下都是可以换行的;
禁用 select 的下拉箭头; 这个适用于表单选择控件 下j箭头的修改, 有多个属性值, 设置它的隐藏 (display:none) 并适用背景图片来修饰可得到我们想要的效果
::ms-expand
禁用 radio 和 checkbox 的默认样式; 适用于表单复选框或单选框按钮默认图标的修改, 同样存在多个属性值, 设置它的隐藏 (display:none) 并适用背景图片
::ms-check
input[type=radio]::-ms-check, input[type=checkbox]::-ms-check {
display: none;
}
禁用 PC 端表单输入框默认清除按钮;
当表单文本输入框输入内容后会显示文本清除按钮,
input[type=text]::-ms-clear , input[type=tel]::-ms-clear, input[type=number]::-ms-clear {
display: none;
}
禁止 ios 和Androidy用户选中中文:
.css {
-webkit-user-select-none;
}
摇一摇功能:
h5中的 devicMMotion: 封装了运动传感器数据事件, 可以获取手机运动下的运动加速度数据;
手机拍照 和 上传图片:
<input type="file" accept="image">
<input type="file" accept="video">
移动端的浏览器一般都支持： window.orientation 这个参数， 通过这个参数, 这个参数可以判断手机是处于 横屏 还是 竖屏。
监听事件 onorientationchange 事件
window.addEventListener("onorientationchange" in window? "onorientationchange" : "resize",
function () {
if(window.orientation === 180 || window.orientation === 0) {
alert ( "竖屏" )
}
if (window.orientation === 90 || window.orientation === - 90) {
alert( '横屏')
}
}
)
在 ipad,iPhone 网页中的开发，我们需要使用这个事件和属性来判断手机处于横屏还是竖屏
屏幕方向对应的 window.orientation 的值：
ipad ： 90 or -90 是横屏
0 or 180 是竖屏
Android： 0 or 180 横屏
90 or -90 竖屏
