H5前端常見問題

Sleepy 發(fā)布于2019-08-20 16:57 / 3378人閱讀

摘要：走了程序媛這條路英式吐槽不經(jīng)歷風(fēng)雨怎么有夏天歲月帶走的是你的童年帶不走的是藏在你內(nèi)心深處的那顆童心其實程序員都挺幼稚得啦哈哈常用標(biāo)簽頁面結(jié)構(gòu)設(shè)置寬度，為一個正整數(shù)，或字符串設(shè)置高度，一般設(shè)置了寬度，會自動解析出高度，可以不用設(shè)置

走了程序媛這條路
英式吐槽：不經(jīng)歷風(fēng)雨怎么有夏天
2017.6.1
歲月帶走的是你的童年
帶不走的是藏在你內(nèi)心深處的那顆童心
Ps:其實程序員都挺幼稚得啦O(∩_∩)O哈哈~

Meta常用標(biāo)簽

1. H5頁面結(jié)構(gòu)



// width    設(shè)置viewport寬度，為一個正整數(shù)，或字符串‘device-width’
// height   設(shè)置viewport高度，一般設(shè)置了寬度，會自動解析出高度，可以不用設(shè)置
// initial-scale    默認(rèn)縮放比例，為一個數(shù)字，可以帶小數(shù)
// minimum-scale    允許用戶最小縮放比例，為一個數(shù)字，可以帶小數(shù)
// maximum-scale    允許用戶最大縮放比例，為一個數(shù)字，可以帶小數(shù)
// user-scalable    是否允許手動縮放

2.其他Meta標(biāo)簽

  H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫

 標(biāo)準(zhǔn)的 lang 屬性寫法

    聲明文檔使用的字符編碼

       頁面描述

      頁面關(guān)鍵詞

    網(wǎng)頁作者

      搜索引擎抓取

 iOS 設(shè)備 begin

  啟用360瀏覽器的極速模式(webkit)
    
          優(yōu)先使用 IE 最新版本和 Chrome

3.頁面緩存設(shè)置

常見問題 移動端如何定義字體 font-family

@ --------------------------------------中文字體的英文名稱
@ 宋體      SimSun
@ 黑體      SimHei
@ 微信雅黑   Microsoft Yahei
@ 微軟正黑體 Microsoft JhengHei
@ 新宋體    NSimSun
@ 新細(xì)明體  MingLiU
@ 細(xì)明體    MingLiU
@ 標(biāo)楷體    DFKai-SB
@ 仿宋     FangSong
@ 楷體     KaiTi
@ 仿宋_GB2312  FangSong_GB2312
@ 楷體_GB2312  KaiTi_GB2312  
@
@ 說明：中文字體多數(shù)使用宋體、雅黑，英文用Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; }

引用iconfont字體方法

點擊查看如何引用iconfont字體

打電話發(fā)郵件發(fā)短信怎么實現(xiàn)

打電話給:15221639774
發(fā)短信給: 10086
點擊我發(fā)郵件

點擊元素產(chǎn)生背景或邊框怎么去掉

//ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除灰色半透明遮罩；
//android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果；
//winphone系統(tǒng),點擊標(biāo)簽產(chǎn)生的灰色半透明背景，能通過設(shè)置去掉；
//特殊說明：有些機(jī)型去除不了，如小米2。對于按鈕類還有個辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下

手機(jī)拍照和上傳圖片

/IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持


屏幕旋轉(zhuǎn)的事件和樣式
//JS處理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?"landscape":"portrait";
    if(orientChk =="lapdscape"){
        //這里是橫屏下需要執(zhí)行的事件
    }else{
        //這里是豎屏下需要執(zhí)行的事件
    }
}

orientInit();
window.addEventListener("onorientationchange" in window?"orientationchange":"resize", function(){
    setTimeout(orientInit, 100);
},false)    

//CSS處理
//豎屏?xí)r樣式
@media all and (orientation:portrait){   }
//橫屏?xí)r樣式
@media all and (orientation:landscape){   }
超實用的CSS樣式
* { padding: 0; margin: 0; border: 0;}
input, textarea, button { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; vertical-align: middle; }
ul, li { list-style-type: none; }
body { min-width: 320px; max-width: 640px; margin: auto;background: none;}
em { font-style: normal; }

//改變輸入框placeholder的顏色值
::-webkit-input-placeholder { /* WebKit browsers */color:#999;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#999;}
::-moz-placeholder { /* Mozilla Firefox 19+ */color:#999;}
:-ms-input-placeholder { /* Internet Explorer 10+ */color:#999;}
audio元素和video元素在ios和andriod中無法自動播放
//音頻，寫法一


//音頻，寫法二


//JS綁定自動播放（操作window時，播放音樂）
$(window).one("touchstart", function(){
    music.play();
})

//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//小結(jié)
//1.audio元素的autoplay屬性在IOS及Android上無法使用，在PC端正常
//2.audio元素沒有設(shè)置controls時，在IOS及Android會占據(jù)空間大小，而在PC端Chrome是不會占據(jù)任何空間
JS判斷微信瀏覽器
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger"){
        return true;
    }else{
        return false;
    }
}

消除transition閃屏
.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
box-sizing: border-box的作用
當(dāng)你設(shè)置一個元素為 box-sizing: border-box; 時，此元素的內(nèi)邊距和邊框不再會增加它的寬度。
例如：
舉個例子
.box {  
    width: 500px;     
    height:100px;  
    border: 1px solid #000;
    -webkit-box-sizing: border-box;     
        -moz-box-sizing: border-box;
                  box-sizing: border-box;
}
如果這時候你加上一個內(nèi)邊距屬性，padding: 10px;
這個div不會撐開，即你所見的邊框位置沒有任何變動，但是“舉個例子”這句話會和div邊框有10px的間距。
一般在寫頁面的時候用這個屬性就不會再考慮邊框和內(nèi)邊距會改變整體所占寬度，即不用再根據(jù)盒子模型再去計算，省去很多麻煩。
Jsonp原理
原理：而jsonp就是利用了
需要進(jìn)入目錄文件git add +文件沖突路徑解決沖突一定不要忘記這一步哦
Linux常用命令


命令
作用



pwd
顯示當(dāng)前操作路徑


ls
列出當(dāng)前目錄所有文件


ls-al
查看隱藏文件


rm
移除某個文件


open
打開當(dāng)前目錄視圖


history
grep npm
查找歷史記錄


cd $COMPANY
/Users/apple/Documents/Project/Maiqi


cat
查看


tail -f nohup.out
查看日志消息


vim filename
打開文件


git status
查看當(dāng)前代碼狀態(tài)


git diff
查看修改文件


q
退出

npm run all npm run listen


Hbuilder常用命令


命令
作用



command+shift+F
格式化


command+T
查找文件

命令	作用
pwd	顯示當(dāng)前操作路徑
ls	列出當(dāng)前目錄所有文件
ls-al	查看隱藏文件
rm	移除某個文件
open	打開當(dāng)前目錄視圖
history	grep npm	查找歷史記錄
cd $COMPANY	/Users/apple/Documents/Project/Maiqi
cat	查看
tail -f nohup.out	查看日志消息
vim filename	打開文件
git status	查看當(dāng)前代碼狀態(tài)
git diff	查看修改文件
q	退出
npm run all npm run listen