<progress id="7nnbd"><big id="7nnbd"><em id="7nnbd"></em></big></progress>

<big id="7nnbd"><meter id="7nnbd"></meter></big>
<progress id="7nnbd"><meter id="7nnbd"><cite id="7nnbd"></cite></meter></progress><meter id="7nnbd"></meter>

      <address id="7nnbd"></address>

          為了賬號安全,請及時綁定郵箱和手機立即綁定

          Web APP開發技巧總結

          2015.06.09 10:26 4079瀏覽
          一、META/LINK相關:

          1、百度禁止轉碼

          通過百度手機打開網頁時,百度可能會對你的網頁進行轉碼,往你頁面貼上它的廣告,非常之惡心。不過我們可以通過這個meta標簽來禁止它:

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

          相關鏈接:SiteApp 轉碼聲明

          2、添加到主屏后的標題(IOS)

          <meta name="apple-mobile-web-app-title" content="標題">

          3、啟用 WebApp 全屏模式(IOS)

          當網站添加到主屏幕后再點擊進行啟動時,可隱藏地址欄(從瀏覽器跳轉或輸入鏈接進入并沒有此效果)

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

          PS:然而,經本人用5S測試,設置"apple-touch-fullscreen"并沒有什么卵用,希望了解者能在底部評論告知

          4、設置狀態欄的背景顏色(IOS)

          設置狀態欄的背景顏色,只有在"apple-mobile-web-app-capable" content="yes"時生效

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

          content 參數:

          • default :狀態欄背景是白色。
          • black :狀態欄背景是黑色。
          • black-translucent :狀態欄背景是半透明。 如果設置為 default 或 black ,網頁內容從狀態欄底部開始。
            如果設置為 black-translucent ,網頁內容充滿整個屏幕,頂部會被狀態欄遮擋。

          5、移動端手機號碼識別(IOS)

          在 iOS Safari (其他瀏覽器和Android均不會)上會對那些看起來像是電話號碼的數字處理為電話鏈接,比如:

          • 7位數字,形如:1234567
          • 帶括號及加號的數字,形如:(+86)123456789
          • 雙連接線的數字,形如:00-00-00111
          • 11位數字,形如:13800138000

          可能還有其他類型的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別:

          但某些時候,你關閉電話自動識別后,又希望某些電話號碼長按時能夠鏈接到 iPhone 的撥號功能和短信功能,你可以使用下面的方法實現:

          (2)開啟電話功能:

          <a href="tel:123456">123456</a>

          (3)開啟短信功能:

          <a href="sms:123456">123456</a>

          6、移動端郵箱識別(Android)

          與電話號碼的識別一樣,在安卓上會對符合郵箱格式的字符串進行識別,我們可以通過如下的meta來管別郵箱的自動識別:

          <meta content="email=no" name="format-detection" />

          同樣地,我們也可以通過標簽屬性來開啟長按郵箱地址彈出郵件發送的功能:

          <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

          7、添加智能 App 廣告條 Smart App Banner(IOS 6+ Safari)

          <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

          8、IOS Web app啟動動畫

          <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

          由于iPad 的啟動畫面是不包括狀態欄區域的。所以啟動圖片需要減去狀態欄區域所對應的方向上的20px大小,相應地在retina設備上要減去40px的大小

          <!-- iPhone -->
          <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
          <!-- iPhone (Retina) -->
          <link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
          <!-- iPad (portrait) -->
          <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
          <!-- iPad (landscape) -->
          <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
          <!-- iPad (Retina, portrait) -->
          <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
          <!-- iPad (Retina, landscape) -->
          <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

          (landscape:橫屏 | portrait:豎屏)

          10、添加到主屏后的APP圖標

          指定web app添加到主屏后的圖標路徑,有兩種略微不同的方式:

          <!-- 設計原圖 -->
          <link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
          <!-- 添加高光效果 -->
          <link href="short_cut_114x114.png" rel="apple-touch-icon">
          • apple-touch-icon:在IOS6及以下的版本會自動為圖標添加一層高光效果(IOS7開始已使用扁平化的設計風格)
          • apple-touch-icon-precomposed:使用“設計原圖圖標”

          效果:

          設計圖標

          圖標尺寸:

          可通過指定size屬性來為不同的設備提供不同的圖標(但通常來說,我們只需提供一個114 x 114 pixels大小的圖標即可 )

          官方說明如下:

          Create different sizes of your app icon for different devices.If you’re creating a universal app, you need to supply app icons in all four sizes.

          For iPhone and iPod touch both of these sizes are required:

          57 x 57 pixels

          114 x 114 pixels (high resolution)

          For iPad, both of these sizes are required:

          72 x 72 pixels

          144 x 144 (high resolution)

          11、優先使用最新版本 IE 和 Chrome

           <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
          二、HTML/CSS

          1、關閉iOS鍵盤首字母自動大寫

          在iOS中,默認情況下鍵盤是開啟首字母大寫的功能的,如果啟用這個功能,可以這樣:

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

          2、關閉iOS輸入自動修正

          和英文輸入默認自動首字母大寫那樣,IOS還做了一個功能,默認輸入法會開啟自動修正輸入內容,這樣的話,用戶經常要操作兩次。如果不希望開啟此功能,我們可以通過input標簽屬性來關閉掉:

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

          3、禁止文本縮放

          當移動設備橫豎屏切換時,文本的大小會重新計算,進行相應的縮放,當我們不需要這種情況時,可以選擇禁止:

          html {
            -webkit-text-size-adjust: 100%;
          }

          需要注意的是,PC端的該屬性已經被移除,該屬性在移動端要生效,必須設置 meta viewport

          4、移動端如何清除輸入框內陰影

          在iOS上,輸入框默認有內部陰影,但無法使用 box-shadow 來清除,如果不需要陰影,可以這樣關閉:

          input,
          textarea {
            border: 0; /* 方法1 */
            -webkit-appearance: none; /* 方法2 */
          }

          5、快速回彈滾動

          我們先來看看回彈滾動在手機瀏覽器發展的歷史:

          • 早期的時候,移動端的瀏覽器都不支持非body元素的滾動條,所以一般都借助 iScroll;
          • Android 3.0/iOS解決了非body元素的滾動問題,但滾動條不可見,同時iOS上只能通過2個手指進行滾動;
          • Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果,不過隨后這個特性又被移除;
          • iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果。

          在iOS上如果你想讓一個元素擁有像 Native 的滾動效果,你可以這樣做:

          .xxx {
              overflow: auto; /* auto | scroll */
              -webkit-overflow-scrolling: touch;
          }

          PS:iScroll用過之后感覺不是很好,有一些詭異的bug,這里推薦另外一個 iDangero Swiper,這個插件集成了滑屏滾動的強大功能(支持3D),而且還有回彈滾動的內置滾動條。

          官方地址:http://www.idangero.us/sliders/swiper/index.php

          6、移動端禁止選中內容

          如果你不想用戶可以選中頁面中的內容,那么你可以在css中禁掉:

          .user-select-none {
            -webkit-user-select: none;  /* Chrome all / Safari all */
            -moz-user-select: none;     /* Firefox all (移動端不需要) */
            -ms-user-select: none;      /* IE 10+ */      
          }

          7、移動端取消touch高亮效果

          在做移動端頁面時,會發現所有a標簽在觸發點擊時或者所有設置了偽類 :active 的元素,默認都會在激活狀態時,顯示高亮框,如果不想要這個高亮,那么你可以通過css以下方法來進行全局的禁止:

          html {
              -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          }

          但這個方法在三星的機子上無效,有一種妥協的方法是把頁面非真實跳轉鏈接的a標簽換成其它標簽,可以解決這個問題。

          8、如何禁止保存或拷貝圖像(IOS)

          通常當你在手機或者pad上長按圖像 img ,會彈出選項 存儲圖像 或者 拷貝圖像,如果你不想讓用戶這么操作,那么你可以通過以下方法來禁止:

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

          參考資料:

          www.cnblogs.com/PeunZhang/p/3407453.html#question_1

          文章源自:www.cnblogs.com/WhiteCusp/p/4502961.html

          點擊查看更多內容
          C
          11人點贊

          若覺得本文不錯,就分享一下吧!

          評論

          相關文章推薦

          正在加載中
          意見反饋 邀請有獎 幫助中心 APP下載
          官方微信

          舉報

          0/150
          提交
          取消
          五福彩票 阿拉尔 | 双鸭山 | 滁州 | 丽水 | 日照 | 泗阳 | 宣城 | 大连 | 常州 | 河源 | 贵州贵阳 | 龙岩 | 泰兴 | 山西太原 | 吕梁 | 图木舒克 | 梅州 | 吐鲁番 | 温州 | 湘潭 | 阳春 | 五家渠 | 湖北武汉 | 济南 | 三亚 | 宝鸡 | 唐山 | 鄂尔多斯 | 海丰 | 临海 | 新疆乌鲁木齐 | 唐山 | 启东 | 泰安 | 徐州 | 铜陵 | 湛江 | 那曲 | 鞍山 | 乐山 | 高雄 | 张北 | 陕西西安 | 山南 | 鹤壁 | 桂林 | 厦门 | 南通 | 滁州 | 三亚 | 滁州 | 漯河 | 温岭 | 自贡 | 广汉 | 儋州 | 西藏拉萨 | 钦州 | 如东 | 荆州 | 溧阳 | 连云港 | 玉环 | 德清 | 丽江 | 庆阳 | 揭阳 | 安吉 | 达州 | 东方 | 东莞 | 丹东 | 阿里 | 金华 | 海宁 | 宜春 | 瓦房店 | 新余 | 巴音郭楞 | 德宏 | 广汉 | 德清 | 邢台 | 伊春 | 吉安 | 三明 | 内蒙古呼和浩特 | 汉川 | 台南 | 乐清 | 遵义 | 镇江 | 景德镇 | 阿勒泰 | 启东 | 亳州 | 克拉玛依 | 周口 | 莱芜 | 香港香港 | 灌南 | 镇江 | 济宁 | 宁波 | 平潭 | 鸡西 | 随州 | 河南郑州 | 曲靖 | 云南昆明 | 孝感 | 台南 | 徐州 |