首次寫iPad布局感想（H5）

AlphaGooo 發布于2019-08-20 16:47 / 359人閱讀

摘要：一直做前端工作，卻從來沒有開發過平板的項目，想來也是有遺憾的，孰知，新公司的第二個項目就是要適配平板，剛開始是懵的，對于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容系統就可以。

一直做前端工作，卻從來沒有開發過平板的項目，想來也是有遺憾的，孰知，新公司的第二個項目就是要適配平板，剛開始是懵的，對于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容iOS系統就可以。

那我現在就說下開發iOS h5項目可能會進到的誤區（知道很菜，但是寫出來也是對自己加深印象）

- ios的專有meta



......列舉常用，其他用時可百度

不要以為引入對于禁止屏幕縮放就萬事大吉了，這只針對于谷歌瀏覽器，要想兼容蘋果自帶的Safari還需要寫入下面這段代碼

    window.onload=function () {
      document.addEventListener("touchstart",function (event) {
        if(event.touches.length>1){
          event.preventDefault();
        }
      })
      var lastTouchEnd=0;
      document.addEventListener("touchend",function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
          event.preventDefault();
        }
        lastTouchEnd=now;
      },false)
    }

- button、input、textarea觸發時的灰色背景塊（高亮顯示）
這都是需要我們去禁止的，畢竟要還原設計稿嘛，這是就要加入這幾個屬性

  -webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);透明度需要為0
  -webkit-user-modify: read-write-plaintext-only;

- 頁面滾動效果
如果在需要滾動的區塊內添加了overflow: auto;這個樣式
肯定會發現滾動的效果不是很流暢，這時就需要在body上添加一個樣式overflow-x: hidden; 實現方式不止一種也可以在滾動快上添加webkit-overflow-scrolling: touch;

GPU云服務器云服務器感想 python感想人工智能感想云棲大會2016感想

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83158.html

首次寫iPad布局感想（H5）

摘要：一直做前端工作，卻從來沒有開發過平板的項目，想來也是有遺憾的，孰知，新公司的第二個項目就是要適配平板，剛開始是懵的，對于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容系統就可以。一直做前端工作，卻從來沒有開發過平板的項目，想來也是有遺憾的，孰知，新公司的第二個項目就是要適配平板，剛開始是懵的，對于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容iOS系統就可以。那我現在就說下...

jhhfft 2019-08-29 12:38 評論0 收藏0
移動端適配方案

摘要：業務環境是決定整體項目的適配方案的核心因素。而淘寶的主站和類似，分為移動端頁面和端頁面，端頁面同樣有著左右的留白，這也是為了讓用戶能夠在寬屏的時候將注意力集中在中間區域。移動端適配方案移動端適配方案是一個老生常談的話題，但是對于不同的項目、不同的業務場景可能會需要不同的適配方案來進行移動端適配，向下兼容的baseline也需要提前訂好。整體寬高其實移動端適配就和下面的玩具一樣，...

feng409 2019-08-30 15:54 評論0 收藏0
Web開發系列【1】實用的網頁布局（PC端）

摘要：利用左側浮動，右側盒子通過形成了。三列布局這是比較復雜的布局，適合有復雜操作功能的網頁，如各大電商網站。建議升級您的瀏覽器，或使用等高級瀏覽器，將會得到更好的體驗在熟悉那些常用的軟件、工具后，我們正式開始開發，在前期準備工作之后，我們要做的事情是寫頁面，也就是網頁布局。在w3c、菜鳥、慕課網等等網站上都有基礎的 HTML+CSS 知識講解，在初期學習中，跟著教程全部過一遍就差不多了。...

Andrman 2019-08-02 16:05 評論0 收藏0
Web開發系列【1】實用的網頁布局（PC端）

摘要：利用左側浮動，右側盒子通過形成了。三列布局這是比較復雜的布局，適合有復雜操作功能的網頁，如各大電商網站。建議升級您的瀏覽器，或使用等高級瀏覽器，將會得到更好的體驗在熟悉那些常用的軟件、工具后，我們正式開始開發，在前期準備工作之后，我們要做的事情是寫頁面，也就是網頁布局。在w3c、菜鳥、慕課網等等網站上都有基礎的 HTML+CSS 知識講解，在初期學習中，跟著教程全部過一遍就差不多了。...

jerryloveemily 2019-08-29 16:44 評論0 收藏0