1. 有時候，厚厚的border也許有用，例如區域滾動，卻要在頂部或底部留出一塊死邊。
2. 切記，告別px吧，em是不錯的選擇，pc端也適用。
3. :empty選擇器選擇裡面沒有內容的標籤。
4. 如果你在文件中使用了 overflow: hidden/auto; 的話，新增下面的 css 可以使滾動更加流暢。
-webkit-overflow-scrolling: touch;
5. input框直接呼叫相機等：
/*" capture="camera">
6. webkit核心瀏覽器自定義滾動條方法：
::-webkit-scrollbar{} /*
整體*/
::-webkit-scrollbar-track {} /*
滾動條槽
*/::-webkit-scrollbar-thumb {} /*
控制部分
*/
7. 移動端，適當的可以採用 -webkit-flex-box(伸縮盒子)布局。
8. 垂直居中3個方法：
display:table-cell; vertical-align:middle;display:-webkit-box; -webkit-box-align:center;
position:absoloute(fixed); top:50%; margin-top:-(1/2)width;
9. 有時，:after(:before)會解決一些頭疼的問題。
10. 增加點選樣式，需使用a標籤，不使用其:active偽類（手機端滑動時有bug，滑動過程中，點選效果不消失）。而是在a標籤上加-webkit-tap-highlight-color:rgba(0,0,0,.1)。
11. 手機網頁中禁用input彈出的輸入法，可以用readonly（disabled會將input報廢），但是特殊情況例如呼叫外掛程式時，效果不理想，那麼可以在外掛程式的配置時，呼叫函式啟動input的blur()。
12. jquery mobile中，不希望表單元素初始化（自動增高等特效），在標籤中加入 data-role="none" 。
13. textarea的內填充效果在border沒有被占用的情況下可以用border來實現。
14. 自定義placeholder ::-webkit-input-placeholder
15. ￥在英文狀態下，實體**是： ¥
16. 點選效果：
為了避免ajax載入出的資料繫結不到事件，因此把事件繫結到body上，再進行進一步選擇。
$('body')
.on('touchstart' , '.click-effect' , function())
.on('touchend , touchmove' , '.click-effect' , function())
17.判斷滾動方向是向上還是向下
var prevtop = 0,currtop = 0;
$(window).scroll(
function
()
else
//prevtop = currtop; //ie下有bug，所以用以下方式
settimeout(function(),0);
});
移動平台WEB前端開發技巧彙總
公升級較簡單 公升級不需要通知使用者，在服務端更新檔案即可，使用者完全沒有感覺 維護比較輕鬆 和一般的web一樣，維護比較簡單，它其實就是乙個站點 複製 複製 settimeout scrollto,0,0,0 複製 19 如何解決android平台中頁面無法自適應 雖然你的html和css都是完全...
移動webAPP前端開發技巧彙總2
一 關於單位的使用 可能在傳統的pc端來說，1px 1px的比例。而在移動端卻不是這樣，1px 因為出現了乙個畫素密度這樣個東西，就不能在移動端使用 px 這個單位。可能在你的大屏手機是1px等於1點幾個畫素，可能在小屏手機卻剛好。就好比網頁的相容性一樣，瀏覽器的核心不同，解析當然會有所不同！這樣設...
移動平台前端開發技巧 三
我們繼續上一節的分享，繼續 移動平台的開發技巧。7 學會使用webkit box 上一節，我們說過自適應布局模式，有些同學可能會問 如何在移動裝置上做到完全自適應呢？很感謝webkit為display屬性提供了乙個webkit box的值，它可以幫助前端工程師做到盒子模型靈活控制，至於如何使用，請閱...