<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          常見的H5移動端Web頁面Bug問題解決方案總匯

          時間:?2017-12-29閱讀:?2929標簽:?h5

          解決jquery ajax調用遠程接口的跨域問題

          首先,接口必須允許遠程調用.這是后端或者運維的事情.你必須保證你得到的一個接口是允許遠程調用的.否則,就沒啥了.

          $.ajax({
              type:'get',
              url:url,
              // 下面的兩行代碼,就是解決跨域的關鍵
              xhrFields: {withCredentials: true},
              crossDomain: true,
              // 就是上面的兩行代碼
              success: function(data){
                  // do something
              },
              error: function(data){
                  // do something
              }
          });
          

          安卓瀏覽器看背景圖片,有些設備會模糊。

          用同等比例的圖片在PC機上很清楚,但是手機上很模糊,原因是什么呢?
          經過研究,是devicePixelRatio作怪,因為手機分辨率太小,如果按照分辨率來顯示網頁,這樣字會非常小,所以蘋果當初就把iPhone 4的960640分辨率,在網頁里只顯示了480320,這樣devicePixelRatio=2。現在android比較亂,有1.5的,有2的也有3的。
          想讓圖片在手機里顯示更為清晰,必須使用2x的背景圖來代替img標簽(一般情況都是用2倍)。例如一個div的寬高是100100,背景圖必須得200200,然后background-size:contain;,這樣顯示出來的圖片就比較清晰了。
          代碼可以如下:

          background:url(../images/icon/all.png) no-repeat center center;
          -webkit-background-size:50px 50px;
          background-size: 50px 50px;display:inline-block; width:100%; height:50px; 
          

          或者指定 background-size:contain;都可以,大家試試!

          圖片加載

          若您遇到圖片加載很慢的問題,對這種情況,手機開發一般用canvas方法加載,下面舉例說明一個canvas的例子:

          <li><canvas></canvas></li> 
          

          js動態加載圖片和li 總共舉例17張圖片!

          var total=17; 
          var zWin=$(window); 
          var render=function(){ 
            var padding=2; 
            var winWidth=zWin.width(); 
            var picWidth=Math.floor((winWidth-padding*3)/4); 
            var tmpl =''; 
            for (var i=1;i<=totla;i++){ 
            var p=padding; 
            var imgSrc='img/'+i+'.jpg'; 
            if(i%4==1){ 
             p=0; 
            } 
            tmpl +='<li+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>'; 
            var imageObj = new Image(); 
            imageObj.index = i; 
            imageObj.onload = function(){ 
              var cvs =$('#cvs_'+this.index)[0].getContext('2d'); 
              cvs.width = this.width; 
              cvs.height=this.height; 
              cvs.drawImage(this,0,0); 
            } 
            imageObj.src=imgSrc; 
            } 
           
          } 
          render(); 
          
          

          apple-mobile-web-app-capable

          apple-mobile-web-app-capable是設置Web應用是否以全屏模式運行。
          語法:

          <meta name="apple-mobile-web-app-capable" content="yes">
          

          說明:
          如果content設置為yes,Web應用會以全屏模式運行,反之,則不會。content的默認值是no,表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

          format-detection

          format-detection 啟動或禁用自動識別頁面中的電話號碼。
          語法:

          <meta name="format-detection" content="telephone=no">
          

          說明:
          默認情況下,設備會自動識別任何可能是電話號碼的字符串。設置telephone=no可以禁用這項功能。

          html5調用安卓或者ios的撥號功能

          html5提供了自動調用撥號的標簽,只要在a標簽的href中添加tel:就可以了。
          如下:

          <a href="tel:4008106999,1034">400-810-6999 轉 1034</a>
          

          撥打手機直接如下
          <a href="tel:15677776767">點擊撥打15677776767</a>

          上下拉動滾動條時卡頓、慢

          body {
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
          }
          

          Android3+和iOS5+支持CSS3的新屬性為overflow-scrolling

          禁止復制、選中文本

          Element {
            -webkit-user-select: none;
            -moz-user-select: none;
            -khtml-user-select: none;
             user-select: none;
          }
          

          解決移動設備可選中頁面文本(視產品需要而定)

          長時間按住頁面出現閃退

          element {
            -webkit-touch-callout: none;
          }
          

          iphone及ipad下輸入框默認內陰影

          Element{
            -webkit-appearance: none; 
          }
          

          ios和android下觸摸元素時出現半透明灰色遮罩

          Element {
            -webkit-tap-highlight-color:rgba(255,255,255,0)
          }
          

          設置alpha值為0就可以去除半透明灰色遮罩,備注:transparent的屬性值在android下無效。

          active兼容處理 即 偽類 :active 失效

          方法一:body添加ontouchstart

          <body ontouchstart="">
          

          方法二:js給 document 綁定 touchstart 或 touchend 事件

          <style>
          a {
           color: #000;
          }
          a:active {
           color: #fff;
          }
          </style>
          <a herf=foo >bar</a>
          <script>
           document.addEventListener('touchstart',function(){},false);
          </script>
          

          動畫定義3D啟用硬件加速

          Element {
            -webkit-transform:translate3d(0, 0, 0)
            transform: translate3d(0, 0, 0);
          }
          

          注意:3D變形會消耗更多的內存與功耗

          Retina屏的1px邊框

          Element{
            border-width: thin;
          }
          

          旋轉屏幕時,字體大小調整的問題

          html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
            -webkit-text-size-adjust:100%;
          }
          

          transition閃屏

          /設置內嵌的元素在 3D 空間如何呈現:保留3D /
           
          -webkit-transform-style: preserve-3d;
          / 設置進行轉換的元素的背面在面對用戶時是否可見:隱藏 /
           
          -webkit-backface-visibility:hidden;
          

          圓角bug

          某些Android手機圓角失效

          background-clip: padding-box;
          

          頂部狀態欄背景色

          <meta name="apple-mobile-web-app-status-bar-style" content="black" />
          

          說明:
          除非你先使用apple-mobile-web-app-capable指定全屏模式,否則這個meta標簽不會起任何作用。
          如果content設置為default,則狀態欄正常顯示。如果設置為blank,則狀態欄會有一個黑色的背景。如果設置為blank-translucent,則狀態欄顯示為黑色半透明。如果設置為default或blank,則頁面顯示在狀態欄的下方,即狀態欄占據上方部分,頁面占據下方部分,二者沒有遮擋對方或被遮擋。如果設置為blank-translucent,則頁面會充滿屏幕,其中頁面頂部會被狀態欄遮蓋住(會覆蓋頁面20px高度,而iphone4和itouch4的Retina屏幕為40px)。默

          設置緩存

          <meta http-equiv="Cache-Control" content="no-cache" />
          

          手機頁面通常在第一次加載后會進行緩存,然后每次刷新會使用緩存而不是去重新向服務器發送請求。如果不希望使用緩存可以設置no-cache。

          桌面圖標

          <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
          <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
          <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
          <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
          

          iOS下針對不同設備定義不同的桌面圖標。如果不定義則以當前屏幕截圖作為圖標。
          上面的寫法可能大家會覺得會有默認光澤,下面這種設置方法可以去掉光澤效果,還原設計圖的效果!

          <link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
          

          圖片尺寸可以設定為5757(px)或者Retina可以定為114114(px),ipad尺寸為72*72(px)

          瀏覽器私有及其它meta

          以下屬性在項目中沒有應用過,可以寫一個demo測試以下!
          QQ瀏覽器私有

          全屏模式

          <meta name="x5-fullscreen" content="true">
          

          強制豎屏

          <meta name="x5-orientation" content="portrait">
          

          強制橫屏

          <meta name="x5-orientation" content="landscape">
          

          應用模式

          <meta name="x5-page-mode" content="app">
          

          UC瀏覽器私有
          全屏模式

          <meta name="full-screen" content="yes">
          

          強制豎屏

          <meta name="screen-orientation" content="portrait">
          

          強制橫屏

          <meta name="screen-orientation" content="landscape">
          

          應用模式

          <meta name="browsermode" content="application">
          

          其它
          針對手持設備優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓

          <meta name="HandheldFriendly" content="true">
          

          微軟的老式瀏覽器

          <meta name="MobileOptimized" content="320">
          

          windows phone 點擊無高光

          <meta name="msapplication-tap-highlight" content="no">
          

          IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

          問題是這樣的,用input search做模糊搜索的時候,在鍵盤里面輸入關鍵詞,會通過ajax后臺查詢,然后返回數據,然后再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件,在安卓手機瀏覽器中是可以的,但是在ios手機瀏覽器中變紅很慢,用輸入法輸入之后,并未立刻相應keyup事件,只有在通過刪除之后才能相應!
          解決辦法:
          可以用html5的oninput事件去代替keyup

          <input type="text" id="testInput">
          <script type="text/javascript">
            document.getElementById('testInput').addEventListener('input', function(e){
              var value = e.target.value;
            });
          </script>
          

          然后就達到類似keyup的效果!

          IOS鍵盤字母輸入,默認首字母大寫

          解決方案,設置如下屬性

          <input type="text" autocapitalize="off" />
          

          select 下拉選擇設置右對齊

          設置如下:

          select option {
          direction: rtl;
          }
          

          通過transform進行skew變形,rotate旋轉會造成出現鋸齒現象

          可以設置如下:

          -webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
           transform: rotate(-4deg) skew(10deg) translateZ(0);
           outline: 1px solid rgba(255,255,255,0);
          

          移動端點擊300ms延遲

          300ms尚可接受,不過因為300ms產生的問題,我們必須要解決。300ms導致用戶體驗并不是很好,解決這個問題,我們一般在移動端用tap事件來取代click事件。
          推薦兩個js,一個是fastclick,一個是tap.js
          關于300ms延遲,具體請看:http://thx.github.io/mobile/300ms-click-delay/

          移動端點透問題

          案例如下:

          <div id="haorooms">點頭事件測試</div>
          <a href="www.jb51.net">www.jb51.net</a>
          

          div是絕對定位的蒙層,并且z-index高于a。而a標簽是頁面中的一個鏈接,我們給div綁定tap事件:

          $('#haorooms').on('tap',function(){
          $('#haorooms').hide();
          });
          

          我們點擊蒙層時 div正常消失,但是當我們在a標簽上點擊蒙層時,發現a鏈接被觸發,這就是所謂的點透事件。
          原因:
          touchstart 早于 touchend 早于click。 亦即click的觸發是有延遲的,這個時間大概在300ms左右,也就是說我們tap觸發之后蒙層隱藏, 此時 click還沒有觸發,300ms之后由于蒙層隱藏,我們的click觸發到了下面的a鏈接上。
          解決:
          (1)盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。
          (2)用fastclick,https://github.com/ftlabs/fastclick
          (3)用preventDefault阻止a標簽的click
          (4)延遲一定的時間(300ms+)來處理事件 (不推薦)
          (5)以上一般都能解決,實在不行就換成click事件。
          下面介紹一下touchend事件,如下:

          $("#haorooms").on("touchend", function (event) {
          event.preventDefault();
          });

          消除 IE10 里面的那個叉號

          input:-ms-clear{display:none;}
          

          關于 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)

          iOS 瀏覽器橫屏時會重置字體大小,設置 text-size-adjust 為 none 可以解決 iOS 上的問題,但桌面版 Safari 的字體縮放功能會失效,因此最佳方案是將 text-size-adjust 為 100% 。

          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
          

          關于 iOS 系統中,中文輸入法輸入英文時,字母之間可能會出現一個六分之一空格

          可以通過正則去掉

          this.value = this.value.replace(/\u2006/g, '');
          

          移動端 HTML5 audio autoplay 失效問題

          這個不是 BUG,由于自動播放網頁中的音頻或視頻,會給用戶帶來一些困擾或者不必要的流量消耗,所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放,必須由用戶來觸發才可以播放。
          解決方法思路:先通過用戶 touchstart 觸碰,觸發播放并暫停(音頻開始加載,后面用 JS 再操作就沒問題了)。
          解決代碼:

          document.addEventListener('touchstart', function () {
            document.getElementsByTagName('audio')[0].play();
            document.getElementsByTagName('audio')[0].pause();
          });
          

          移動端 HTML5 input date 不支持 placeholder 問題

          這個我感覺沒有什么好的解決方案,用如下方法
          復制代碼 代碼如下:

          <input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">
          

          有的瀏覽器可能要點擊兩遍!

          部分機型存在type為search的input,自帶close按鈕樣式修改方法

          有些機型的搜索input控件會自帶close按鈕(一個偽元素),而通常為了兼容所有瀏覽器,我們會自己實現一個,此時去掉原生close按鈕的方法為

          #Search::-webkit-search-cancel-button{
            display: none;  
          }
          

          如果想使用原生close按鈕,又想使其符合設計風格,可以對這個偽元素的樣式進行修改。

          喚起select的option展開

          zepto方式:

          $(sltElement).trrgger("mousedown");
          

          原生js方式:

          function showDropdown(sltElement) {
            var event;
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('mousedown', true, true, window);
            sltElement.dispatchEvent(event);
          };
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/294

          H5嵌入APP后,通過window.WebViewJavascriptBridge原生APP與H5之間交互

          原生APP跳轉到H5頁面時,往往需要攜帶一些用戶信息,之前做法是在跳轉的地址中拼接H5頁面需要的參數,現在通過window.WebViewJavascriptBridge悄悄的進行數據交互

          h5頁面的viewpoint

          只要寫手機端的h5頁面,viewpoint是繞不過的坎,不處理好這個東西,h5頁面就無法正常顯示。那它到底是怎么回事呢?網上曾看到一個據說很有名的外國人,寫過一篇\\\"三個viewpoint\\\"的概念,但是看了,覺得似懂非懂,后來做了不少h5頁面

          h5開發在ios瀏覽器遇到的坑

          click事件;在ios上,最后一個元素加margin-bottom無效;時間轉化問題;position: fixed中的input框聚焦軟鍵盤彈出,IOS下會有光標錯位問題;滾動穿透問題

          Android H5秒開方案調研—今日頭條H5秒開方案詳解

          文件下載耗時:包括html、css、js、圖片等;頁面渲染耗時:頁面渲染,解析js、css文件等;WebView創建耗時:首次創建WebView耗時大約需要500ms左右,第二次創建耗時大約需要20ms左右

          H5喚醒App之scheme方案

          在寫移動端頁面會遇到喚醒App的需求, 一般都是通過scheme協議喚起的,這里記錄一下,以新浪微博為例: 其協議為 sinaweibo://splash; 這些協議需要自己去收集

          H5活動頁面2小時快速開發

          這是一套我自己經常用的H5活動頁面開發腳手架,針對目前一般的H5頁面,基本上2小時就能完成相關的開發內容。俗話說:工欲善其事必先利其器,有了這么一套H5頁面腳手架,我相信80%的H5頁面,都能夠在2小時當中開發完成。

          H5頁面中喚起APP的方法

          需要在從APP分享出去的H5頁面中,帶有一個立即打開的按鈕,如果本地安裝了app,那么就直接喚起本地的app,如果沒有安裝,則跳轉到下載。這是一個很正常的推廣和導流量的策略。

          H5與企業微信jssdk集成

          注冊企業微信,在應用與小程序欄目中,設置可信域名,配置公眾號菜單。可信域名不得不說下,在最初開發時,認為設置并驗證后,微信認證接口會實現跨域請求,其實并沒有。所以全在H5端還得配合服務端完成票據獲取等操作。

          h5通過css實現禁止ios端長按復制選中文字的方法

          在ios端默認的長按選擇,可以對文字進行復制粘貼。但是在實際開發中,針對一些按鈕一般要避免長按時彈出選中文字,或者一些罩層要避免彈出。 這篇文章通過css3實現禁止ios端長按復制選中文字的方法

          如何在h5中調用支付寶支付功能

          如何在自己的H5頁面如何集成支付寶支付呢?目前采用前后端分離的開發模式,數據都是通過服務器那邊獲取的,現在需要集成支付寶支付,下面就簡單介紹下。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网