首頁  >  文章  >  web前端  >  行動端基礎知識的相關總結

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

零下一度
零下一度原創
2017-07-24 10:14:011179瀏覽

一.單位(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(頁標題):

<p>    keywords(頁面關鍵詞):<meta keywords></p> <p>   〔description(頁描述;meta name="description" content="your description"/></p> <p>    author(網頁作者):<meta name></p> <p>    robots(網頁搜尋引擎索引方式):robotterms是一組使用逗號(,)分割的值,通常取值:</p> <p>      none:搜尋引擎將忽略此網頁,等同於noindex,nofollow;</p> <p>      noindex:搜尋引擎不索引此網頁;nofollow:搜尋引擎不繼續透過此網頁的連結索引搜尋其它的網頁;</p> <p>#     網頁 all:搜尋引擎將繼續將網頁索引。連結索引,等同於index,follow;</p> <p>      index:搜尋引擎索引此網頁;follow:搜尋引擎繼續透過此網頁的連結索引搜尋其它的網頁;</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta> <!-- ps:如果网页没有提供robots,搜索引擎认为网页的robots属性为all(index和follow --></pre></div> <pre class="brush:php;toolbar:false">1.H5页面窗口自动调整到设备宽度,禁止用户缩放</pre> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta></pre></div> <p>   2.忽略將頁面中的數字識別為電話號碼(ios設備容易出現)</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta></pre></div> <p>   3.忽略頁面中對郵箱地址的辨識(android裝置容易出現)</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><meta></pre></div> <p>   4.上下拉動捲軸時卡頓</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">body{     -webkit-overflow-scrolling:touch;     overflow-scrolling:touch; } </pre></div> <p>#   5.禁止複製,選取文字</p> <div class="cnblogs_code"> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-0.gif" alt="行動端基礎知識的相關總結"></span></div> <pre class="brush:php;toolbar:false">body{     -webkit-user-select:none;     -moz-user-select:none;     -khtml-user-select:none;     user-select:none; }</pre> <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/74d43751fee143954c34300028f4d703-1.gif" alt="行動端基礎知識的相關總結"></span></div> </div> <p>#   6.長時間按住頁面出現閃退</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">html{     -webkit-touch-callout:none; }</pre></div>#<p>   7. IOS/Android触摸元素时出现半透明灰色遮罩</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">html{     -webkit-tab-highlight-color:rgba(255,255,255,0); }</pre></div> <p>   8. 伪类 :active失效</p> <p>    方法一:</p>

    方法二: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn