摘要:走了程序媛這條路英式吐槽不經(jīng)歷風(fēng)雨怎么有夏天歲月帶走的是你的童年帶不走的是藏在你內(nèi)心深處的那顆童心其實程序員都挺幼稚得啦哈哈常用標簽頁面結(jié)構(gòu)設(shè)置寬度,為一個正整數(shù),或字符串設(shè)置高度,一般設(shè)置了寬度,會自動解析出高度,可以不用設(shè)置
走了程序媛這條路
英式吐槽:不經(jīng)歷風(fēng)雨 怎么有夏天
2017.6.1
歲月帶走的是你的童年
帶不走的是藏在你內(nèi)心深處的那顆童心
Ps:其實程序員都挺幼稚得啦O(∩_∩)O哈哈~
1. H5頁面結(jié)構(gòu)
// width 設(shè)置viewport寬度,為一個正整數(shù),或字符串‘device-width’ // height 設(shè)置viewport高度,一般設(shè)置了寬度,會自動解析出高度,可以不用設(shè)置 // initial-scale 默認縮放比例,為一個數(shù)字,可以帶小數(shù) // minimum-scale 允許用戶最小縮放比例,為一個數(shù)字,可以帶小數(shù) // maximum-scale 允許用戶最大縮放比例,為一個數(shù)字,可以帶小數(shù) // user-scalable 是否允許手動縮放
2.其他Meta標簽
H5標準聲明,使用 HTML5 doctype,不區(qū)分大小寫 標準的 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 @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 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去除部分機器自帶的效果; //winphone系統(tǒng),點擊標簽產(chǎn)生的灰色半透明背景,能通過設(shè)置去掉; //特殊說明:有些機型去除不了,如小米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下手機拍照和上傳圖片
/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的作用當你設(shè)置一個元素為 box-sizing: border-box; 時,此元素的內(nèi)邊距和邊框不再會增加它的寬度。 例如:Jsonp原理舉個例子.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就是利用了
Linux常用命令
需要進入目錄文件git add +文件沖突路徑解決沖突一定不要忘記這一步哦
命令 | 作用 | |
---|---|---|
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 | 查看當前代碼狀態(tài) | |
git diff | 查看修改文件 | |
q | 退出 | |
npm run all npm run listen |
命令 | 作用 |
---|---|
command+shift+F | 格式化 |
command+T | 查找文件 |
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112050.html
摘要:四總結(jié)前端性能測試方案當然,前端性能不僅僅表現(xiàn)在白屏卡頓問題,也有可能是手機過度發(fā)熱等等。從用戶核心體驗出發(fā),我們認為,前端性能最重要的參考標準就是要以最輕量的方式,給用戶最好的體驗。 H5 頁面發(fā)版靈活,輕量,又具有跨平臺的特性,在業(yè)務(wù)上有很多應(yīng)用場景。但是同時對比 App,H5 的性能表現(xiàn)總是要遜色一籌,比如頁面打開往往會出現(xiàn)白屏,滑動列表等交互場景下也不如 Native 頁面流暢...
摘要:前言微信小程序中可以直接運行頁面,這一新組件的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面,這一新組件 web-view 的產(chǎn)生,可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型,微信小程序后臺...
摘要:并且除了常用的端,還要考慮微信端,或者是端。所以我們要有一套機制,在端上走的代碼,在端或者微信端上走端對應(yīng)的代碼。對于一個從零開始的移動端項目,我總結(jié)了以上這些移動開發(fā)難點,希望之后的人能少踩點坑,站在我的肩膀上提高項目開發(fā)的效率和質(zhì)量。 從零搭建移動H5開發(fā)項目實戰(zhàn) 前端H5的前世今身 在Pc的時代,前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面!而在移動為王的今天,NA開發(fā)在早期占領(lǐng)了大多...
摘要:并且除了常用的端,還要考慮微信端,或者是端。所以我們要有一套機制,在端上走的代碼,在端或者微信端上走端對應(yīng)的代碼。對于一個從零開始的移動端項目,我總結(jié)了以上這些移動開發(fā)難點,希望之后的人能少踩點坑,站在我的肩膀上提高項目開發(fā)的效率和質(zhì)量。 從零搭建移動H5開發(fā)項目實戰(zhàn) 前端H5的前世今身 在Pc的時代,前端技術(shù)無疑統(tǒng)治了大多數(shù)用戶的交互界面!而在移動為王的今天,NA開發(fā)在早期占領(lǐng)了大多...
閱讀 1970·2019-08-30 15:54
閱讀 3596·2019-08-29 13:07
閱讀 3124·2019-08-29 12:39
閱讀 1789·2019-08-26 12:13
閱讀 1547·2019-08-23 18:31
閱讀 2158·2019-08-23 18:05
閱讀 1844·2019-08-23 18:00
閱讀 1042·2019-08-23 17:15