一大猛、使用真實(shí)手機(jī)測(cè)試未發(fā)布網(wǎng)頁(yè)的方法
方法① 在虛擬機(jī)中搭建xampp务蝠，將文件通過(guò)FTP傳到虛擬機(jī)匹耕，在一個(gè)局域網(wǎng)中，用手機(jī)訪問(wèn)虛擬機(jī)的IP地址
? 特點(diǎn): 繁瑣怒竿、可調(diào)試PHP
方法②?使用Fiddler用手機(jī)訪問(wèn)http://127.0.0.1進(jìn)行訪問(wèn)
? 特點(diǎn): 有些公眾號(hào)無(wú)法使用Fiddler打開(kāi)
方法② 放在nginx的html跟目錄改為項(xiàng)目的目錄忧额，用手機(jī)通過(guò)局域網(wǎng)訪問(wèn)電腦的IP地址，可調(diào)試網(wǎng)頁(yè)
? 特點(diǎn): 相對(duì)簡(jiǎn)單愧口，不可調(diào)試PHP
方法③ 將WebStorm的http://localhost:63342改為http://127.0.0.1:63342睦番，用手機(jī)通過(guò)Fiddler訪問(wèn)
? 特點(diǎn): 最簡(jiǎn)單，不可調(diào)試PHP耍属，無(wú)法在微信中打開(kāi)(除非額外配置(修改端口)托嚣，使其可在局域網(wǎng)打開(kāi))
調(diào)試手機(jī)中頁(yè)面的方法
方法① 使用Chrome DevTools遠(yuǎn)程調(diào)試Android和iOS頁(yè)面
? 特點(diǎn): 可調(diào)試需要用微信瀏覽器打開(kāi)的頁(yè)面
? 參考: https://juejin.im/entry/5afd1b276fb9a07acc11ec81?utm_medium=fe&utm_source=weixinqun
? 步驟: 1、chrome瀏覽器翻墻厚骗，在地址欄輸入:?chrome://inspect
? ? ? ? 2示启、手機(jī)和電腦用usb連接，打開(kāi)USB調(diào)試
? ? ? ? 3领舰、在手機(jī)上打開(kāi)網(wǎng)頁(yè)夫嗓，電腦上可顯示此手機(jī)打開(kāi)的頁(yè)面，點(diǎn)擊當(dāng)前顯示的頁(yè)面下的inspect即可
? ? ? ? 注意:?有些app里的網(wǎng)頁(yè)無(wú)法顯示網(wǎng)址冲秽，不支持調(diào)試
? ? ? ? ? ? ? 有些時(shí)候不能正常顯示網(wǎng)址舍咖，重新插拔數(shù)據(jù)線即可
方法② 使用Mac?調(diào)試 IOS?系統(tǒng)的 Safari 瀏覽器
步驟:
1、打開(kāi)蘋(píng)果手機(jī)→設(shè)置→Safari瀏覽器→高級(jí)→Web檢查器
2锉桑、打開(kāi) Mac 上的 Safari瀏覽器→偏好設(shè)置→高級(jí)→在菜單欄中顯示'開(kāi)發(fā)'菜單
3排霉、用數(shù)據(jù)線連接 Mac 電腦和蘋(píng)果手機(jī)→選擇信任設(shè)備→在手機(jī)的 Safari瀏覽器 中打開(kāi)需要調(diào)試的頁(yè)面→在電腦上點(diǎn)擊開(kāi)發(fā)→**的iPhone→打開(kāi)調(diào)試的網(wǎng)址→打開(kāi)調(diào)試界面
方法③ 使用vconsole
https://github.com/Tencent/vConsole//vConsole文檔
vConsole是一個(gè)輕量、可拓展民轴、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板
特性
① 查看console日志
② 查看網(wǎng)絡(luò)請(qǐng)求
③ 查看頁(yè)面element結(jié)構(gòu)
④ 查看Cookies和localStorage
⑤ 手動(dòng)執(zhí)行JS命令行
⑥ 自定義插件
開(kāi)啟vconsole:
<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
? var vConsole = new VConsole();? ? //初始化
? console.log('Hello world');
</script>
http://debugx5.qq.com????????微信瀏覽器清除緩存的網(wǎng)址,勾選需要清除的選項(xiàng)即可
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?也可以開(kāi)啟vconsole
方法④ 適用于Safari
? 瀏覽器設(shè)置: Safari→偏好設(shè)置→高級(jí)→勾選"在菜單欄中顯示開(kāi)發(fā)"菜單
? iphone設(shè)置: 設(shè)置→Safari→高級(jí)→打開(kāi) Web 檢查器
方法⑤ iOS模擬器: 不需要真機(jī)攻柠，適合調(diào)試Webview和H5有頻繁交互的功能頁(yè)面
? 下載Xcode→運(yùn)行項(xiàng)目→選擇模擬器iphonex→編譯后就會(huì)打開(kāi)模擬器
微信瀏覽器是在webview的上層做的緩存:如果請(qǐng)求過(guò)了這個(gè)地址球订，就會(huì)存在本地，之后就不取線上的了
在調(diào)試階段或者頻繁更新的頁(yè)面加入以下頭信息可防止緩存(有些手機(jī)無(wú)效)
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
移動(dòng)端彈出鍵盤(pán)時(shí)瑰钮，fixed定位在底部的內(nèi)容依然會(huì)固定出現(xiàn)在鍵盤(pán)上方
建議在移動(dòng)端的基礎(chǔ)樣式中設(shè)置 white-space:nowrap; 在個(gè)別元素上允許換行
在ios中冒滩，最下面的margin-bottom可能會(huì)不起作用，建議換成padding-bottom
注意: 在移動(dòng)端浪谴，運(yùn)行js時(shí)旦部，*.gif、css動(dòng)畫(huà)可能會(huì)暫停较店，無(wú)法完整顯示加載中
var obj={id:"1", value:"5"};
alert(JSON.stringify(obj)); ? ? ?? //將對(duì)象轉(zhuǎn)換為json字符串可用于移動(dòng)端調(diào)試
如:
try{
? 可能出錯(cuò)的語(yǔ)句(執(zhí)行語(yǔ)句)
}catch(err){
?alert(JSON.stringify(err)); ? ?? //或: alert(err.message)
}
_______________________________________________________________________________________________
二士八、移動(dòng)端設(shè)置視口及其它meta(通用)
① <meta charset="UTF-8"> ? ? ? ?//設(shè)置網(wǎng)頁(yè)的編碼格式
②<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? //必備,WebStorm快捷鍵meta:vp
或<meta name="viewport" content="initial-scale=1.0, minimum-scale=0.5, maximum-scale=1.0,
user-scalable=yes" />
? width=device-width: 屏幕的寬等于分辨率的寬
? initial-scale=1: 指定視口的初始化縮放倍率為1
? user-scalable=no/0: 不允許用于手動(dòng)縮放網(wǎng)頁(yè)，yes/1允許縮放
? ? ? ? ? ? ? ? ? ? 設(shè)置為no后梁呈，minimum-scale 和 maximum-scale都將被忽略婚度，因?yàn)椴豢赡芸s放
③ <meta name="format-detection" content="telephone=no" />? //禁止iPhone把數(shù)字識(shí)別為電話號(hào)碼
④ <meta name="format-detection" content="email=no" /> ? ?? //忽略Android對(duì)郵箱地址的識(shí)別
⑤ <meta name="format-detection" content="adress=no" /> ? ? //點(diǎn)擊地址后，禁止跳轉(zhuǎn)至地圖
<meta name="format-detection" content="telephone=no,email=no,adress=no" />?? //③④⑤的簡(jiǎn)寫(xiě)
⑥?<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">? ? //在360等雙核瀏覽器中強(qiáng)制使用最新的內(nèi)核渲染頁(yè)面
target-densitydpi=device-dpi: 屏幕像素密度官卡，每英寸點(diǎn)的數(shù)量(dpi)
取值范圍:
? device-dpi: 使用設(shè)備原本的dpi作為目標(biāo)dpi蝗茁，不會(huì)發(fā)生默認(rèn)縮放
? high-dpi: 使用hdpi作為目標(biāo)dpi，中等像素密度和低像素密度設(shè)備相應(yīng)縮小
? medium-dpi: 使用mdpi作為目標(biāo)dpi寻咒，高像素密度設(shè)備相應(yīng)放大哮翘，低像素密度設(shè)備相應(yīng)縮小(默認(rèn))
? low-dpi: 使用ldpi作為目標(biāo)dpi，中等像素密度和高像素密度設(shè)備相應(yīng)放大
? 整數(shù)數(shù)字: 指定一個(gè)具體的dpi值作為target dpi毛秘，必須在70–400之間
注:① 為防止Android Browser和WebView根據(jù)不同屏幕的像素密度對(duì)頁(yè)面縮放饭寺，可將viewport的target-densitydpi設(shè)置為device-dpi(否則頁(yè)面會(huì)根據(jù)當(dāng)前屏幕的像素密度進(jìn)行展示)，同時(shí)還需要將viewport的 width定義為與設(shè)備的width匹配叫挟，這樣頁(yè)面就可以和屏幕相適應(yīng)
? ?② 為了兼容性考慮艰匙，Android 4.4 以上拋棄了target-densitydpi屬性，它只在Android舊設(shè)備上生效
網(wǎng)頁(yè)的框架(灰色的可酌情添加抹恳，更淺的在PC端使用)
<html>
? <meta name="description" content="">
? <meta name="keywords" content="">
? <meta name="viewport"?content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
? <meta name="format-detection" content="telephone=no,email=no,adress=no"/>
? <meta http-equiv="x-dns-prefetch-control" content="on"/>
? <link rel="dns-prefetch" >
? <!-- Set render engine for 360 browser -->
? <meta name="renderer" content="webkit">
? <!-- No Baidu Siteapp-->
? <meta http-equiv="Cache-Control" content="no-siteapp"/>
? <!-- Add to homescreen for Chrome on Android -->
? <meta name="mobile-web-app-capable" content="yes">
? <!-- Add to homescreen for Safari on iOS -->
? <meta name="apple-mobile-web-app-capable" content="yes">
? <meta name="apple-mobile-web-app-status-bar-style" content="black">
? <meta name="apple-mobile-web-app-title" content="myApp"/>
? <!-- Tile icon for Win8 (tile color) -->
? <meta name="msapplication-TileColor" content="#0e90d2">
? <meta?name="theme-color"?content="#0096ff" />
? <title>myApp</title>
? <link rel="stylesheet" href="assets/css/app.css"></head>
<body>
<!--在這里編寫(xiě)代碼-->
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/app.js"></script>
</body>
</html>
注意:favicon.ico使用服務(wù)器上的即可员凝，不需要使用link標(biāo)簽
<link rel="icon" href="static/images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon" />
三、CSS3 Media Query 媒體查詢技術(shù):
@media not/only MEDIA-TYPE and (MEDIA-FEATURE){ CSS樣式規(guī)則?} ? ? ? ?//不要忘記加空格
? MEDIA-TYPE: 媒體類型
? ? 取值:
? ? ?① all: 所有設(shè)備（默認(rèn)值）
? ? ?② screen: 屏幕奋献，電腦健霹、手機(jī)、平板電腦的屏幕
? ? ?③ tv: 電視設(shè)備
? MEDIA-FEATURE: 媒體特性
? ? 取值:
? ? ?① width: 指定瀏覽器的窗口寬度是否為指定的數(shù)值(手機(jī)屏幕一般為320px-580px)
? ? ?② min-width: 指定瀏覽器寬度的最小值
? ? ?③ max-width: 指定瀏覽器寬度的最大值
JS的計(jì)算方式:
document.documentElement.style.fontSize = document.documentElement.clientWidth/32+ 'px';
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?// 32: iPhone6/7/8(寬375px)下瓶蚂，1rem =?11.71875px
CSS的形式:
@media screen and (min-width: 320px) and (max-width: 359px) {html{font-size:10px;}}
@media screen and (min-width: 360px) and (max-width: 374px) {html{font-size:11.25px;}}
@media screen and (min-width: 375px) and (max-width: 399px) {html{font-size:11.71875px;}}
@media screen and (min-width: 400px) and (max-width: 413px) {html{font-size:12.5px;}}
@media screen and (min-width: 414px) and (max-width: 439px) {html{font-size:12.9375px;}}
@media screen and (min-width: 440px) and (max-width: 479px) {html{font-size:13.75px;}}
@media screen and (min-width: 480px) and (max-width: 519px) {html{font-size:15px;}}
@media screen and (min-width: 520px) and (max-width: 559px) {html{font-size:16.25px;}}
@media screen and (min-width: 560px) and?(max-width: 599px) {html{font-size:17.5px;}}
@media screen and (min-width: 600px) and (max-width: 639px) {html{font-size:18.75px;}}
@media screen and (min-width: 640px) and (max-width: 679px) {html{font-size:20px;}}
@media screen and (min-width: 680px)?and (max-width: 719px) {html{font-size:21.25px;}}
@media screen and (min-width: 720px)?and (max-width: 759px) {html{font-size:22.5px;}}
@media screen and (min-width: 760px)?and (max-width: 799px) {html{font-size:23.75px;}}
@media screen and (min-width: 800px) and (max-width: 839px) {html{font-size:25px;}}
@media screen and (min-width: 840px) and (max-width: 879px) {html{font-size:26.25px;}}
@media screen and (min-width: 880px)?and (max-width: 919px) {html{font-size:27.5px;}}
@media screen and (min-width: 920px) and (max-width: 959px) {html{font-size:28.75px;}}
@media screen and (min-width: 960px) and (max-width: 999px) {html{font-size:30px;}}
@media screen and (min-width: 1000px) and (max-width: 1039px) {html{font-size:31.25px;}}
@media screen and (min-width: 1040px) and (max-width: 1079px) {html{font-size:32.5px;}}
@media screen and (min-width: 1080px) and (max-width: 1119px) {html{font-size:33.75px;}}
@media screen and (min-width: 1120px) and (max-width: 1159px) {html{font-size:35px;}}
@media screen and (min-width: 1160px) {html{font-size:36.25px;}}
JS的計(jì)算方式:
動(dòng)態(tài)計(jì)算屏幕的寬度糖埋，得到網(wǎng)頁(yè)的根字體大小，并限定最大的rem
(function(doc, win){
? var docEl = doc.documentElement;
? var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
? var recalc = function(){
? ? var clientWidth = docEl.clientWidth;
? ? if(!clientWidth) return false;
? ? if(clientWidth > 750) clientWidth=750;? ? //限制最大的寬度尺寸扬跋，限定最大rem
docEl.style.fontSize =clientWidth / 32+ 'px';
? };
? if (!doc.addEventListener) return false;
? win.addEventListener(resizeEvt, recalc, false);
? doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
移動(dòng)端開(kāi)發(fā)過(guò)程中阶捆，因?yàn)槭謾C(jī)的dpr(設(shè)備像素比不同)，需要根據(jù)dpr來(lái)修改圖標(biāo)的大小
通過(guò)@media(媒體查詢)钦听，判斷設(shè)備的dpr洒试，動(dòng)態(tài)修改圖標(biāo)的背景圖片
.bg_img{
? width: 1rem;
? height: 1rem;
? background-image: url("../img/questionnaire.png");
? background-repeat: no-repeat;
? background-position: center;
? background-size: contain;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
? .bg_img{
? ? background-image: url("../img/questionnaire@2x.png");
? }
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
? .bg_img{
? ? background-image: url("../img/questionnaire@3x.png");
? }
}
_______________________________________________________________________________________________
四、字體:
ios 系統(tǒng)
? 默認(rèn)中文字體是Heiti SC
? 默認(rèn)英文字體是Helvetica
? 默認(rèn)數(shù)字字體是HelveticaNeue
? 無(wú)微軟雅黑字體
android 系統(tǒng)
? 默認(rèn)中文字體是Droidsansfallback
? 默認(rèn)英文和數(shù)字字體是Droid Sans
? 無(wú)微軟雅黑字體
winphone 系統(tǒng)
? 默認(rèn)中文字體是Dengxian(方正等線體)
? 默認(rèn)英文和數(shù)字字體是Segoe
? 無(wú)微軟雅黑字體
注: 如無(wú)特殊需求朴上，手機(jī)端無(wú)需定義中文字體垒棋，使用系統(tǒng)默認(rèn)即可
? ? 英文字體和數(shù)字字體可使用 Helvetica，三種系統(tǒng)都支持
代碼: body{?font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif; }
或 body{ font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif; }
_______________________________________________________________________________________________
CSS3中的單位(瀏覽器默認(rèn)字體為16px):
注意:chrome強(qiáng)制最小字體為12號(hào)痪宰，即使設(shè)置成10px也會(huì)顯示成12px叼架，即使把html的font-size設(shè)置成10px,子節(jié)點(diǎn)rem的計(jì)算還是以12px為基準(zhǔn)，但可以使用viewport設(shè)置縮放比來(lái)調(diào)整字體衣撬，其它瀏覽器無(wú)限制
移動(dòng)端字體最小可設(shè)置為8px(有些機(jī)型最小可設(shè)置1px乖订，移動(dòng)端chrome限制同樣為12px)
px: 絕對(duì)單位，頁(yè)面按精確像素展示
em: 相對(duì)單位具练，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小乍构，如果自身定義了font-size則按自身計(jì)算
rem: 相對(duì)單位，相對(duì)根節(jié)點(diǎn)html的字體大小來(lái)計(jì)算
頁(yè)面基準(zhǔn)320px(20px),html的font-size值的計(jì)算:
document.getElementsByTagName('html')[0].style.fontSize=document.body.clientWidth/16+"px"
需設(shè)置meta視口:
vw: viewpoint width扛点，視窗寬度哥遮，1vw等于視窗寬度的1%
vh: viewpoint height，視窗高度陵究，1vh等于視窗高度的1%
vmin: vw和vh中較小的那個(gè)
vmax: vw和vh中較大的那個(gè)
vw,vh,vmin,vmax: IE9+局部支持眠饮，chrome/firefox/safari/opera支持，ios safari 8+支持铜邮，android browser4.4+支持仪召，chrome for android39支持
適配方案(在微信中滾動(dòng)時(shí)可能會(huì)卡頓):
html{
font-size:?3.1250133333vw;/* 100vw/375 ==3.1250133333vw/11.7188?*/
}
注意: 可用于解決頁(yè)面內(nèi)容已加載，但設(shè)置字體的js還未執(zhí)行時(shí)的字體閃爍問(wèn)題
其它單位:
%: ?百分比
in: 寸
cm: 厘米
mm: 毫米
pt: point松蒜，大約1/72寸
pc: pica返咱，大約6pt，1/6寸
設(shè)計(jì)師常常給的是物理分辨率牍鞠，程序中用到的是邏輯分辨率
物理分辨率是硬件所支持的分辨率咖摹，邏輯分辨率是軟件可以達(dá)到的分辨率
比如:?iphone6的分辨率寫(xiě)著375*667，指的是邏輯分辨率难述，而設(shè)計(jì)師設(shè)計(jì)稿上的750*1334是物理分辨率
物理分辨率/邏輯分辨率 = 像素倍率dpr萤晴，也就是常說(shuō)的幾倍屏
iphone6的像素倍率 = (750*1334)/(375*667) = 2
在移動(dòng)端，直接寫(xiě)1px胁后，會(huì)顯示為邏輯分辨率1px店读，在2dpr屏幕下，物理分辨率是2px攀芯，在3dpr下屯断，是3px
所以需要對(duì)屏幕或此線條進(jìn)行縮放，使之變?yōu)?px
設(shè)置dpr，對(duì)視口進(jìn)行縮放
var isAndroid = window.navigator.appVersion.match(/android/gi);
var isIPhone? = window.navigator.appVersion.match(/iphone/gi);
var devicePR? = window.devicePixelRatio;
var dpr = 1;
if(isAndroid || isIPhone){? //Android殖演、iOS下氧秘，對(duì)于2、3的屏趴久，用2丸相、3倍的方案，其余用1倍方案
? if(devicePR >= 3){
? ? dpr = 3;
? }else if(devicePR >= 2){
? ? dpr = 2;
? }
}
var scale = 1/dpr;
var meta? = document.createElement('meta');
meta.setAttribute('name', 'viewport');
meta.setAttribute('content', 'width=device-width,initial-scale='+scale+',user-scalable=no');
document.head.appendChild(meta);
document.documentElement.style.fontSize = innerWidth/32 + 'px';
//設(shè)置rem(iPhone6下彼棍，1rem = 23.4375px)
或者對(duì)線條進(jìn)行縮放:?可使用元素生成灭忠，對(duì)生成的線條進(jìn)行縮放
.bor_after_bottom{
? position: relative;
}
.bor_after_bottom:after{
? content: '';
? position: absolute;
? left: 0;
? bottom: 0;
? width: 100%;
? height: 1px;
? background-color: red;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.bor_after_bottom:after{
? ? -webkit-transform: scaleY(0.66667);
? ? transform: scaleY(0.66667);
? }
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.bor_after_bottom:after{
? ? -webkit-transform: scaleY(0.5);
? ? transform: scaleY(0.5);
? }
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
.bor_after_bottom:after{
? ? -webkit-transform: scaleY(0.33333);
? ? transform: scaleY(0.33333);
? }
}
也可以直接縮放內(nèi)容生成元素
.weui_btn:after{
? content: "";
? width: 200%;
? height: 200%;
? position: absolute;
? top: 0;
? left: 0;
? border: 1px solid rgba(0, 0, 0, 0.2);
? -webkit-transform: scale(0.5);
? transform: scale(0.5);
? -webkit-transform-origin: 0 0;
? transform-origin: 0 0;
? box-sizing: border-box;
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.weui_btn:after{
????-webkit-transform: scale(0.66667);
????transform: scale(0.66667);
??}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.weui_btn:after{
????-webkit-transform: scale(0.5);
????transform: scale(0.5);
??}
}
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
.weui_btn:after{
????-webkit-transform: scale(0.33333);
????transform: scale(0.33333);
? }
}
_______________________________________________________________________________________________
五、用戶點(diǎn)擊一個(gè)鏈接座硕，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 禁用方法:———或者直接使用div標(biāo)簽
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)} ? ?//iOS/Android系統(tǒng)
<meta name="msapplication-tap-highlight" content="no"> ? ? ? ? ? ? ? ? ? //winphone系統(tǒng)
span:active,span:focus{ background-color: #B4DEF3; } ? ?//在點(diǎn)擊元素(或Tab時(shí))時(shí)添加一個(gè)遮罩層
<input type="text"/>? ? ? ? //文本框弛作，彈出漢字鍵盤(pán)
<input type="password"/>? ? //密碼框，彈出漢字鍵盤(pán)
<input type="tel"/>? ? ? ? ?//電話华匾，彈出數(shù)字鍵盤(pán)
<input type="number" />? ? ?//數(shù)字映琳，彈出數(shù)字鍵盤(pán)，只能輸入數(shù)字 + - .等
<input type="url"/>? ? ? ? ?//網(wǎng)址瘦真，彈出英文鍵盤(pán)
<input type="search"/>? ? ? //搜索刊头，彈出英文鍵盤(pán)，有些瀏覽器會(huì)顯示個(gè)×
<input type="range" min="5" max="100" step="1"/>? ? //范圍诸尽，定義滑塊控件
$('input').focus();? ? ? ?//使光標(biāo)聚焦于此輸入框
$('input').blur();? ? ? ? //使光標(biāo)離開(kāi)輸入框原杂，可以自動(dòng)隱藏手機(jī)端軟鍵盤(pán)
_______________________________________________________________________________________________
六、點(diǎn)擊鏈接自動(dòng)調(diào)用相關(guān)功能
<a href="tel:10086">打電話給: 10086</a> ? ? ? ? ? ? //打電話
<a href="sms:10086">發(fā)短信給: 10086</a> ? ? ? ? ? ? //發(fā)短信您机，winphone系統(tǒng)無(wú)效
<a href="mailto:10086@163.com">10086@163.com</a> ? ?//寫(xiě)郵件穿肄，自動(dòng)調(diào)用默認(rèn)客戶端電子郵件程序
在某些Android內(nèi)嵌網(wǎng)頁(yè)上，即使在head設(shè)置<meta name="format-detection" content="telephone=no" />际看，仍然無(wú)法避免調(diào)取電話咸产，可以設(shè)置 "禁止用戶選中文本"?來(lái)避免調(diào)用電話
div{ -webkit-user-select:none; -ms-user-select:none; -moz-user-select:none;
? ? ?-o-user-select:none; user-select:none; }
_______________________________________________________________________________________________
七、屏幕旋轉(zhuǎn)的事件和樣式
屬性: window.orientation
取值: 正負(fù)90表示橫屏模式仲闽；0和180表現(xiàn)為豎屏模式
window.onorientationchange = function(){ ? ? ?? //當(dāng)手機(jī)屏幕旋轉(zhuǎn)時(shí)脑溢，自動(dòng)觸發(fā)此函數(shù)
? switch(window.orientation){
? ? case -90:
? ? case 90:?alert("橫屏:" + window.orientation);
? ? case 0:
? ? case 180: alert("豎屏:" + window.orientation);
? ? break;
? }
}
CSS樣式:
@media all and (orientation:portrait) { } ? ? ? ? //豎屏?xí)r使用的樣式
@media all and (orientation:landscape) {?} ? ? ? ?//橫屏?xí)r使用的樣式
_______________________________________________________________________________________________
八、audio元素和video元素在ios和andriod中無(wú)法自動(dòng)播放
解決方案: 觸屏即播
$('html').one('touchstart', function(){
? audio.play()
})
九赖欣、HTML5 deviceMotion事件: 封裝了運(yùn)動(dòng)傳感器數(shù)據(jù)的事件屑彻，可獲取手機(jī)運(yùn)動(dòng)狀態(tài)下的運(yùn)動(dòng)加速度等數(shù)據(jù)
http://peunzhang.github.io/demo/deviceMotion/index.html? ? ? ? ? ? ? 體驗(yàn)Demo
十、手機(jī)拍照和上傳圖片
利用<input type="file">的accept屬性
? <input type=file accept="image/*"> ? ? ?? //選擇照片
? <input type=file accept="video/*"> ? ? ?? //選擇視頻
accept屬性可以用來(lái)限制用戶上傳文件的類型顶吮，在iOS和OSX中支持的很好
multiple屬性可以選擇多個(gè)文件社牲，可以配合FormData對(duì)象，顯示批量上傳
_______________________________________________________________________________________________
十一悴了、兼容移動(dòng)端搏恤，只允許輸入整數(shù)
方法①
$("input").keyup(function(){
? var $this=$(this);
? var val=$this.val();
? if(val===""){
? ? $this.val("");
? ? return false; ? ?//不需要重新計(jì)算违寿，同時(shí)退出函數(shù)
? }else if(isNaN(val) || val.slice(0,1)==="0" || val===" " ||val<1){ ? ? ?? //可能會(huì)是'00'
? ? val=1;
? }else if(val>99){
? ? val=99;
? }
? $this.val(parseInt(val)); ?? //去掉小數(shù)點(diǎn)(必須是type="tel/text"才能去掉)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//type="tel/number"，點(diǎn)擊時(shí)可彈出數(shù)字鍵盤(pán)
? return true; ? ? ? //需要重新計(jì)算
})
$("body").on("change", function(e){ ? ?//防止動(dòng)態(tài)加載的輸入框無(wú)法綁定事件
? var $target=$(e.target);
? if($target.is("input[type=tel/text]")){
? ? if($target.val() <= 0){ ? ? ? ? ?? //若輸入框?yàn)榭帐炜眨瑒t $this.val()==0 成立(number類型的0)
? ? ? $target.val(1);
? ? ? //若每次輸入都更換元素藤巢，則用以下方式調(diào)整其值(重新生成元素之后)
? ? ? //var val=$input.val(); ? ? ? ? ? ? ? //保存輸入框的值
? ? ? //if(val<1) val=1;
? ? ? //$input.val("").focus().val(val); ?? //清空,聚焦于此輸入框,再賦值,使光標(biāo)位于文字右側(cè)
? ? }else{
? ? ? $target.val(parseInt($target.val())); //防止用戶黏貼
? ? }
? }
})
方法②
$(".betting input").keyup(function(){? ? //keyup事件處理
? var $this = $(this);
?$this.val($this.val().replace(/\D|^0/g, ''));
? if($this.val() > 999){
? ? $this.val(999);
? }
}).bind("paste", function(){? ? //Ctrl+V事件處理
? $(this).val($(this).val().replace(/\D|^0/g, ''));
}).css("ime-mode", "disabled"); //CSS設(shè)置輸入法不可用
注意:
① type="tel/text"? ? ? 才能去掉小數(shù)點(diǎn)
? ?type="tel/number"? ? 點(diǎn)擊時(shí)可彈出數(shù)字鍵盤(pán)
② 取值時(shí)，應(yīng)考慮當(dāng)輸入框?yàn)榭諘r(shí)痛阻，值設(shè)為1
屬性: ime-mode? ?設(shè)置或檢索是否允許用戶激活輸入中文菌瘪，韓文腮敌，日文等輸入法(IME)狀態(tài)
值:? ?disabled? ??完全禁用ime阱当，對(duì)于有焦點(diǎn)的控件(如輸入框)，用戶不可以激活ime
input輸入框糜工、加弊添、減的樣式
<div class="enter">
? <span>追</span>
? <span>期</span>
</div>
<style>
.enter{
? display: inline-block;
? margin: auto 0.5rem;
? font-size: 1.2rem;
? text-align: center;
? vertical-align: top;
? color: #BCAD98;
}
.enter>input{
? width: 4rem;
? border-top: 1px solid #DDD;
? border-bottom: 1px solid #DDD;
? box-shadow: 0 1px 1px #DDD inset;
? color: #8E8066;
? text-align: center;
? background-color: transparent;
}
.enter>i{
? width: 2rem;
? border: 1px solid #DDD;
? background-color: #F0F0EE;
? background-image: linear-gradient(to bottom, #FFF, #ECECEA);
}
.enter>i:active{
? background-color: #EFEFED;
? background-image: linear-gradient(to bottom, #EFEFED, #E8E8E6);
}
.enter>input, .enter>i{
? display: inline-block;
? height: 1.8rem;
? line-height: 1.8rem;
? vertical-align: middle;
}
</style>
