熱點:

                          企業網站建設

                          上海網站建設

                          網站建設知識

                          seo

                          網絡營銷知識

                          手機網站建設知識

                          網站建設方案

                          網站優化知識

                          網站建設

                          24小時報道最新建站資訊!

                          主頁 > 手機網站建設知識 > 正文

                          手機網站Html5前端開發的必備知識點

                          2020/1/18 手機網站建設知識

                          一、Html5 手機網站  input 設置為type=number  的問題

                          h5網頁input 的type設置為number一般會產生三個問題,一個問題是maxlength屬性不好用了。另外一個是form提交的時候,默認給取整了。三是部分安卓手機出現樣式問題。

                          問題一的解決辦法:

                          <input name="" type="number" oninput="checkTextLength(this,11)"/>
                          

                          function checkTextLength(obj,leng){

                          if(obj.value.length>leng){

                          obj.value=obj.value.substr(0,leng);

                          //obj.value=obj.value.substring(0,leng);

                          }

                          }

                          問題二,是因為form提交默認做了表單驗證,step默認是1,要設置step屬性,假如保留2位小數,寫法如下:

                          <input name="" type="number" step="0.01" min="1" />
                          

                          演示如下:<input name="" type="search" value="" id="searchID"/> 搜索右邊出現關閉按鈕


                          <input name="" type="Date" value=""/>  出現時間日期表

                          <input name="" type="week" value="" />

                          <input name="" type="tel" value="" />


                          有興趣的小伙伴們,可以去試試這些功能。讓我們的移動端開發非常方便。

                          關于step,我在這里做簡單的介紹,input 中type=number,一般會自動生成一個上下箭頭,點擊上箭頭默認增加一個step,點擊下箭頭默認會減少一個step。number中默認 step是1。也就是step=0.01,可以允許輸入2位小數,并且點擊上下箭頭分別增加0.01和減少0.01。

                          假如step和min一起使用,那么數值必須在min和max之間。

                          看看上面的例子就明白了:

                          輸入框可以輸入哪些數字?

                          首先,最小值是1,那么可以輸入1.0,第二個是可以輸入(1+3.1)那就是4.1,以此類推,每次點擊上下箭頭都會增加或者減少3.1,輸入其他數字無效。這就是step的簡單介紹。

                          問題三,去除input默認樣式

                          使用方法如下:
                          

                          .elmClass{

                             -webkit-appearance:none;

                             -moz-appearance:none;

                             appearance:none;

                          }

                          使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的默認風格,其實我們可以反過來思路,使用“appearance”屬性,來改變任何元素的瀏覽器默認風格,簡單的說,你可以使用“appearance”屬性將“段落p”渲染成button的風格,也可以渲染成“輸入框”、“選擇框”等效果。

                          用上面的方法同時可以設置input 按鈕樣式會被默認樣式覆蓋。

                           

                           

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

                          解決辦法如下:
                          


                          .bianxing{ 

                          -webkit-transform:skew(10deg) rotate(-4deg) translateZ(0);

                          transform:skew(10deg) rotate(-4deg) translateZ(0);

                          outline: 1px solid rgba(255,255,255,0);

                          }

                           

                          三、移動端 HTML5 audio autoplay 失效問題

                          這個不是 BUG,由于自動播放網頁中的音頻或視頻,會給用戶帶來一些困擾或者不必要的流量消耗,所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放,必須由用戶來觸發才可以播放。

                          解決方法思路:先通過用戶 touchstart 觸碰,觸發播放并暫停(音頻開始加載,后面用 JS 再操作就沒問題了)。

                          解決代碼:
                          


                          document.addEventListener("touchstart",function(){

                          document.getElementsByTagName('audio')[0].play();  //播放

                          document.getElementsByTagName('audio')[0].pause(); //暫停

                          });


                          附上移動端視頻全屏播放代碼:

                          <video class="video-box" data-index="3" id="video1" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="music/guo111.mp4"></video>

                          四、兩種良好的拼接帶格式字符串的方法

                          JS拼字符串,一般喜歡用+。如果想要很多行拼在一起,且方便閱讀,一般的做法是:

                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          var
                          s = '<div>'
                          + '<div>'
                          +'</div>'
                          +'<div>${a},{{a}}'
                          +   '<ul>'
                          +       '<!-- for: ${people} as ${p} -->'
                          +       '<li>${p.name}</li>'
                          +       '<!-- /for -->'
                          +   '</ul>'
                          +'</div>'
                          +'</div>';

                          這種已經算比較好了,但還是不夠好。比如有太多的+號,有太多的”,這里的結構還算少的,要是再多的話,+和’也會更多。下面是更簡潔的方式,也是我一直在用的:

                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          11
                          12
                          var ss = '<!-- target:Name -->
                          <div>
                          <div></div>
                          <div>${a},{{a}}
                          <ul>
                          <!-- for: ${people} as ${p} -->
                          <li>${p.name}</li>
                          <!-- /for -->
                          </ul>
                          </div>
                          </div>
                          <!-- /target -->';

                          這種方式的好處顯而易見:不管字符串有多長,始終只有一對”,甚至連+都沒有;效率比第1種略高。你也可以隨時中斷(當然,中斷時就要閉合一次”),插入變量。

                           

                          五、其他一些比較實用的手機網站Html5前端開發知識點。

                          (1)、防止按鈕點擊時 背景閃爍

                          html{

                          -webkit-tap-highlight-color: transparent;

                          }

                          (2)、設置input的placeholder內容樣式的方法

                          input::-webkit-input-placeholder{
                          color:#999;
                          font-size: 14px;
                          }

                          (3)、 禁止用戶選中文字    -webkit-user-:none     反之:允許用戶復制: -webkit-user-:auto。當然這個地方需要注意下, -webkit-user-:auto。必須用在塊元素有效。

                          (4)、移動端點透問題的解決辦法:

                          點透,就是在元素綁定 tap 事件,進行元素的隱藏或移動位置時,其底下的元素剛好綁定了 click 事件或有web響應的元素時,會觸發底下元素的響應,形成穿透一樣的效果,我們也稱之為 點透。在使用 zepto 的 tap 方法時,就會發生點透現象。

                          解決方法:

                          1、不要使用 click 事件,用 tap 代替

                          2、使用 fastclick

                          以上是關于“手機網站Html5前端開發的必備知識點”的介紹,如需手機網站建設,wap開發,推薦手機網站建設服務商銀狐動力:http://www.infoo.cn 熱線:4007203721

                          TAG: 上海網站建設 頭條動態 自媒體建設知識 小程序開發知識 公眾號建設知識 網絡營銷知識 網站優化哪家好 優化網站排名 seo 網站建設知識

                          特別推薦—上海網站建設服務商


                          熱門標簽
                          99久久女人与狗的精品在线,日本AV不卡一区二区三区免费,广州富婆女sm国产在线播放,swag麻豆传媒时间静止,超碰国产日韩在线视频,国产裸体直播自慰观看,12岁日本少女萝莉,国产网红23p