移動web開發小貼示

zeyu發表於2019-02-16

阻止彈性滾動

<script>
functionBlockMove(event){

//Tell Safari not to move the window.
event.preventDefault();

}
</script>
<body ontouchmove=”BlockMove(event);”>

</body>

檢測螢幕是否旋轉

···//Detect whether device supports orientationchange event, otherwise fall back to
//the resize event.
varsupportsOrientationChange="onorientationchange"inwindow,
    orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function(){
    alert(`HOLY ROTATING SCREENS BATMAN:`+window.orientation+" "+screen.width);
},false);···

禁止webapp跳轉到safari(for ios)

indow.navigator.standalone){

        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change `remotes` to true
    varnoddy,
        remotes=false;
    document.addEventListener(`click`,function(event){
        noddy=event.target;
        //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
        while(noddy.nodeName!=="A"&&noddy.nodeName!=="HTML"){
            noddy=noddy.parentNode;
        }
        if(`href`innoddy&&noddy.href.indexOf(`http`)!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
            event.preventDefault();
            document.location.href=noddy.href;
        }
    },false);
}

阻止旋轉螢幕時自動調整字型大小

-webkit-text-size-adjust:none;

IOS中禁止使用者選中文字

-webkit-user-select:none;

iOS中如何禁止使用者儲存圖片 複製圖片

-webkit-touch-calloutt:none;

語音輸入

<input type="text"x-webkit-speech />

檔案上傳, 從相機捕獲媒體

<input type="file"accept="image/*; capture=camera" />
<input type="file"accept="video/*; capture=camcorder" />
<input type="file"accept="audio/*; capture=microphone" />



  相容安卓微信呼叫攝像頭
 <input type="file" name="file"  capture="camera">
相容安卓預設選擇sd卡上的相簿圖片
 <input type="file" name="file" accept="image/*" >
 

傳送簡訊給多個人

<a href="sms:18888886666,18888885555"> 傳送簡訊給多個人
    

備註:transparent的屬性值在android下無效。

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同時遮蔽ios和android下點選元素時出現的陰影。

2、-webkit-appearance:none可以同時遮蔽輸入框怪異的內陰影。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以讓動畫更加流暢(這個屬性會呼叫硬體加速模式),但是在android下不可亂用,很多見所未見的bug就是因為這個。

4、@-webkit-keyframes可以預定義很多你所想到的動畫,然後通過-webkit-transition來呼叫。

5、-webkit-background-size可以做高清圖示,不過一些低版本的android只能識別background-size,所以有必要兩個都要寫上;用這個屬性的時候推薦樹勇cover這個值,可以自動去匹配寬和高。

6、text-shadow多用這個屬性,可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image,不解釋,可以精簡程式碼。

8、android、ios4及以下,固定寬/高塊級元素的overflow:scroll/auto失效,屬於瀏覽器的bug,可藉助第三方工具實現。

9、ios5+可以通過scrollTo(0,0)來自動隱藏瀏覽器位址列。

10、<meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width”>width可是寬度,initial-scale初始化縮放比例,maximum-scale允許使用者縮放的最大比例,minimum-scale允許使用者縮放的最小比例,user-scalable是否允許使用者縮放。

11、允許使用者新增到主螢幕,並提供webapp的支援。

12、css3動畫會影響你的自動聚焦,所以自動聚焦要在動畫執行之前來做,或者直接捨棄。

13、使用media query適配不同螢幕。

14、如果涉及較多域外連結,DNS Prefetching可以幫你做DNS預解析。

15、如果你希望你的站點更多地在SNS上傳播,那麼Open Graph Protocol會比較適合你。

16、當用iScroll時候,不能使用:focus{outline:0}偽類,否則滑動會卡。

持續更新,希望關注點贊。

相關文章