H5前端常見問題

時間 2019-12-07

標籤 h5 前端常見問題简体版

原文原文鏈接

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

Meta經常使用標籤

1. H5頁面結構html

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

// width    設置viewport寬度，爲一個正整數，或字符串‘device-width’
// height   設置viewport高度，通常設置了寬度，會自動解析出高度，能夠不用設置
// initial-scale    默認縮放比例，爲一個數字，能夠帶小數
// minimum-scale    容許用戶最小縮放比例，爲一個數字，能夠帶小數
// maximum-scale    容許用戶最大縮放比例，爲一個數字，能夠帶小數
// user-scalable    是否容許手動縮放

2.其餘Meta標籤android

<!DOCTYPE html>  H5標準聲明，使用 HTML5 doctype，不區分大小寫

<head lang=」en」> 標準的 lang 屬性寫法

<meta charset=’utf-8′>    聲明文檔使用的字符編碼

<meta name=」description」 content=」不超過150個字符」/>       頁面描述

<meta name=」keywords」 content=」」/>      頁面關鍵詞

<meta name=」author」 content=」name, email@gmail.com」/>    網頁做者

<meta name=」robots」 content=」index,follow」/>      搜索引擎抓取

<meta name=」apple-mobile-web-app-title」 content=」標題」> iOS 設備 begin

<meta name=」renderer」 content=」webkit」>  啓用360瀏覽器的極速模式(webkit)
    
<meta http-equiv=」X-UA-Compatible」 content=」IE=edge,chrome=1″/>          優先使用 IE 最新版本和 Chrome

3.頁面緩存設置ios

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

常見問題

移動端如何定義字體 font-family

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

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

引用iconfont字體方法git

點擊查看如何引用iconfont字體程序員

打電話發郵件發短信怎麼實現

<a href="tel:15221639774">打電話給:15221639774</a>
<a href="sms:10086">發短信給: 10086</a>
<a href="mailto:893394342@qq.com">點擊我發郵件</a>

點擊元素產生背景或邊框怎麼去掉

//ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0去除灰色半透明遮罩；
//android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果；
//winphone系統,點擊標籤產生的灰色半透明背景，能經過設置<meta name="msapplication-tap-highlight" content="no">去掉；
//特殊說明：有些機型去除不了，如小米2。對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
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下
<meta name="msapplication-tap-highlight" content="no">

手機拍照和上傳圖片

/IOS有拍照、錄像、選取本地圖片功能，部分Android只有選擇本地圖片功能。Winphone不支持
<input type="file" accept="images/*" />
<input type="file" accept="video/*" /

屏幕旋轉的事件和樣式

//JS處理
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //這裏是橫屏下須要執行的事件
    }else{
        //這裏是豎屏下須要執行的事件
    }
}

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

//CSS處理
//豎屏時樣式
@media all and (orientation:portrait){   }
//橫屏時樣式
@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中沒法自動播放

//音頻，寫法一
<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>

//音頻，寫法二
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    優先播放音樂bg.ogg，不支持在播放bg.mp3
</audio>

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

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

//小結
//1.audio元素的autoplay屬性在IOS及Android上沒法使用，在PC端正常
//2.audio元素沒有設置controls時，在IOS及Android會佔據空間大小，而在PC端Chrome是不會佔據任何空間

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的做用

當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框再也不會增長它的寬度。
例如：
<div class="box">舉個例子</div>
.box {  
    width: 500px;     
    height:100px;  
    border: 1px solid #000;
    -webkit-box-sizing: border-box;     
        -moz-box-sizing: border-box;
                  box-sizing: border-box;
}
若是這時候你加上一個內邊距屬性，padding: 10px;
這個div不會撐開，即你所見的邊框位置沒有任何變更，可是「舉個例子」這句話會和div邊框有10px的間距。
通常在寫頁面的時候用這個屬性就不會再考慮邊框和內邊距會改變總體所佔寬度，即不用再根據盒子模型再去計算，省去不少麻煩。

Jsonp原理

原理：而jsonp就是利用了<script>標籤能夠連接到不一樣源的js腳本，來到達跨域目的。利用頁面上 script 標籤能夠跨域，而且其 src 指定的js腳本到達瀏覽器會執行的特性，咱們能夠進行跨域取得數據web

經常使用字體顏色

Git更新/提交代碼

cd kake/ 項目名npm
sh.gitjson
pull／push
update_1／描述用英文並用下劃線分割

注：更新以前可以使用git status查看是否有修改，git diff查看所修改文件
注：若是pull的時候有CONFLICT關鍵字

須要進入目錄文件git add +文件衝突路徑解決衝突必定不要忘記這一步哦

Linux經常使用命令

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

Hbuilder經常使用命令

命令	做用
command+shift+F	格式化
command+T	查找文件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。