时间:2021-07-01 10:21:17 帮助过:6人阅读
1.px:屏幕设备物理上能显示出的最小的一个点,不同设备上点的长宽,比例不一定相同;
2.em/rem:相同点:都是一个相对大小的值;不同点:em是相对父级元素,rem是相对html(默认值视浏览器而定,Chrome的默认为16px);
rem单位在移动端前端开发很流行。rem单位确实好处蛮多的,它是相对于根节点,让我们整个网站单位可以统一。还可以让我们的字体更好的自适应网站的大小,但是,你用过了就知道,它会出现一个问题:用Chrome浏览器打开你做的网站的时候,有时候会出现字体很大的情况。但是刷新一下页面就好了。
之所以会出现这种情况,原因是因为我们为了计算方便,将原本默认1rem=16px修改1rem=10px;因此,我们在html中通常做了如下设置:
html{ font-size:62.5%;/*10÷16×100=62.5% 1rem=10px*/ }
但是呢,Chrome浏览器有时候会忽略了html的设置,于是在初始化页面的时候,出现了上面字体过大的情况。仔细研究会发现,出现字体过大的“元素”,通常是没有设置font-size的,元素的font-size是继承根目录的,因此,解决方案为:在你要展现的文字父级或者其本身设置font-size;
二.头部信息:
1.DOCTYPE(Docment Type):此标签告知浏览器文档使用哪种html或者 xhtml 规范,不区分大小写,HTML代码:
<!DOCTYPE html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->
2.lang:此属性放在<html>标签中用于设置文档的语言类型(英语:en;中文:zh等),HTML代码:
<html lang="en"> ... </html>
3.charser:声明文档使用的字符编码(GBK,UTF-8),HTML代码:
<meta charset ="UTF-8">
4.format-detection(识别规则)→content参数(默认都是yes):
telephone:数字转化为拨号链接(yes/no)——no:禁止把数字转化为拨号链接,yes:开启把数字转化为拨号链接;
email:识别邮箱(yes/no)——no:禁止作为邮箱地址,yes:开启把文字默认为邮箱地址;
adress:点击地址跳转至地图——no:禁止跳转至地图,yes:开启点击地址跳转至地图的功能;
<meta name="format-detection" content="telephone=no,email=no ,,adress=no"/>
5.viewport(针对移动设备) →content 参数:
width:viewport宽度;height:viewport 高度(通常可以不设置);initial-scale:初始缩放比例;maximum-scale:最大缩放比例;minimum-scale:最小缩放比例;user-scalable:是否允许缩放(yes/no)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
6.SEO优化:
title(页面标题):<title>your title</title>
keywords(页面关键词):<meta name="keywords" content="your keywords"/>
description(页面描述):<meta name="description" content="your description"/>
author(网页作者):<meta name="author" content="author name"/>
robots(网页搜索引擎索引方式):robotterms是一组使用逗号(,)分割的值,通常取值:
none:搜索引擎将忽略此网页,等同于noindex,nofollow;
noindex:搜索引擎不索引此网页;nofollow:搜索引擎不继续通过此网页的链接索引搜索其它的网页;
all:搜索引擎将索引此网页与继续通过此网页的链接索引,等同于index,follow;
index:搜索引擎索引此网页;follow:搜索引擎继续通过此网页的链接索引搜索其它的网页;
<meta name="robots" content="index,follow"/> <!-- ps:如果网页没有提供robots,搜索引擎认为网页的robots属性为all(index和follow -->
1.H5页面窗口自动调整到设备宽度,禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=no"/>
2.忽略将页面中的数字识别为电话号码(ios设备容易出现)
<meta name="format-detection" content="telephone=no"/>
3.忽略页面中对邮箱地址的识别(android设备容易出现)
<meta name="format-detection" content="email=no"/>
4.上下拉动滚动条时卡顿
body{ -webkit-overflow-scrolling:touch; overflow-scrolling:touch; }
5. 禁止复制,选中文本
body{ -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; user-select:none; }
6.长时间按住页面出现闪退
html{ -webkit-touch-callout:none; }
7. IOS/Android触摸元素时出现半透明灰色遮罩
html{ -webkit-tab-highlight-color:rgba(255,255,255,0); }
8. 伪类 :active失效
方法一:<body ontouchstart=””><!-- 给body添加 ontouchstart -->
方法二:js给document绑定 touchstart 或 touchend 事件 document.addEventListener(‘touchstart’,function(){},false);
9. 降级处理(CSS3)
if('transition' in document.documentElement.style){ console.log(‘支持transitioin’); }else{//这里进行降级处理,调用不同的CSS console.log(‘不支持transition’); }
10.旋转屏幕时,调整字体大小
html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{ -webkit-text-size-adjust:100%; }
11.某些Android圆角失效
background-clip:padding-box;
12.IOS中input键盘事件支持不是很好(通过html5的oninput达到类似 keyup 的的效果)
document.getElementById('inputId').addEventListener('input',function(e){ var e = e || event;// 浏览器兼容性处理 var value = e.target.value; console.log(value); });
13.消除IE里面那个叉号
input:-ms-clear{ display:none; }
14. IOS设备上输入框默认内阴影
html{ -webkit-appearance:none; }
15.IOS设置input按钮样式会被默认样式覆盖
input,textarea{ border:0; -webkit-appearance:none; }
16. IOS键盘字母输入,默认首字母大写
<input type="text" autocapitalize="off"/>
17. input 类型 设置为 number 的问题:
17-1.maxlength属性用不了:<input type="number" oninput="checkLength(this,5)"/>
function checkLength(obj,length){ if(obj.value.length > length){ obj.value = obj.value.substr(0,length); } }
17-2.设置step(默认为1):<input type="number" step="0.01"/>
17-3.去除input默认样式
input[type=number]{ -moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
四.移动端事件(click点透):
1.事件的变化:
① PC端的鼠标事件(失效):mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave
② 几个原始事件取代click点击事件(移动端click事件也存在,但会有一个200ms~300ms的触发延时问题):
touchstart→触控开始时触发,类似于mousedown
touchmove→触控点在屏幕上移动时触发,类似于mousemove
在移动设备上,触控点从一个元素移动到另一个元素上时,不会像PC端一样触发类似mouseover、mouseout、mouseenter、mouseleave等事件
touchend→触控结束时触发,类似于mouseup
touchcancel→更高级别的事情发生时触发,比如在游戏中突然来电话,就会触发touchcancel事件,并且在touchcancel时保存当前游戏的状态信息
③ PC端一台机器只有一个鼠标,与鼠标相关的属性都放到了一个event对象上;
移动端设备大多支持多点触控,一个事件可能与多个触控点相关,每个触控点都需要记录自己单独的属性,与touch相关的属性都是TouchList类型,触控位置、目标元素,全部放到了touch对象上;
touches→当前屏幕的手指列表;changedTouches→触发当前事件的手指列表;targetTouches→当前元素上的手指列表;
touch对象主要属性:
clientX / clientY→触控点相对浏览器窗口的位置;pageX / pageY→触控点相对页面的位置;screenX / screenY→触控点相对屏幕的位置;
identifier→touch对象的ID;target→当前的DOM元素 , 该属性是触控事件最先发生的元素
2.click点透事件:
① 什么是click点透 :举个例子,现有A(上)、B(下)两个盒子重叠排列,盒子A有绑定touchend事件,事件处理为隐藏盒子A,盒子B有绑定click事件,此时点击盒子A一次,也会触发到盒子B的click事件
② 点透出现的场景 :A / B两个元素层上下Z轴重叠,上层的A元素点击后消失或移开,下层的B元素有默认的click事件(如a标签),或 B元素绑定了click事件
③ 为什么会出现点透 :移动端click事件有明显的延迟,touchstart和click的区别:
touchstart:这个DOM(或冒泡到这个DOM)上手指触摸开始即能立即触发;
click: 这个DOM(或冒泡到这个DOM)上手指触摸开始,且手指未曾在屏幕上移动(某些浏览器允许移动一个非常小的位移值),
且在这个DOM上手指离开屏幕,且触摸和离开屏幕之间的间隔时间较短(某些浏览器不检测间隔时间,也会触发click)才能触发;
④ 如何解决 :
对于B元素本身没有默认click事件的情况,应统一使用touch事件,统一代码风格,并且由于click事件在移动端的延迟要大很多,不利于用户体验,所以关于触摸事件应尽量使用touch相关事件;
对于B元素本身存在默认click事件的情况,应及时取消B元素的默认点击事件,从而阻止click事件的产生,即应在 touch函数中取消事件的默认动作:
if(e.type == "touchend"){ e.preventDefault();//取消事件的默认动作(如果存在这样的动作) }
好的,以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧,欢迎各位看官转载或补充哦!
以上就是移动端基础知识的相关总结的详细内容,更多请关注Gxl网其它相关文章!