行動端基礎知識的相關總結

一.單位(px,em,rem)

　　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程式碼：

nbsp;html><!-- 使用HTML5 DOCTYPE 不区分大小写 -->

　　2.lang：此屬性放在標籤中用於設定文件的語言類型(英文:en；中文:zh等)，HTML程式碼：

...

　　3.charser：宣告文件所使用的字元編碼(GBK，UTF-8)，HTML程式碼：

<meta>

 　  4.format-detection(識別規則)→content參數(預設都是yes)：

　　　　telephone：數字轉換為撥號連結(yes/no)－no：禁止將數字轉換為撥號鏈接，yes：開啟把數字轉化為撥號鏈接；

　　　　email：識別郵箱(yes/no)——no：禁止作為郵箱地址，yes：開啟把文字預設為郵箱地址；

　　　　adress：點選地址跳到地圖－no：禁止跳到地圖，yes：開啟點選位址跳轉至地圖的功能；

<meta>

 　　5.viewport (針對行動裝置) →content 參數：

　　　　width：viewport寬度；height：viewport 高度(通常可以不設定)；initial-scale：初始縮放比例；maximum-scale：最大縮放比例；minimum-scale ：最小縮放比例；user-scalable：是否允許縮放(yes/no)

<meta>

　　6.SEO最佳化：

　　　　title(頁標題)：

　　　　方法二：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>

　　　17. input 类型 设置为 number 的问题：

　　　　17-1.maxlength属性用不了：<input>

function checkLength(obj,length){
    if(obj.value.length > length){
    　　obj.value = obj.value.substr(0,length);
    }
}

　　　　17-2.设置step(默认为1)：<input>

　　　　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();//取消事件的默认动作(如果存在这样的动作)
}

好的，以上就是我从那个小的项目中获取的一些移动端的基础知识和技巧，欢迎各位看官转载或补充哦！

以上是行動端基礎知識的相關總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！