微信瀏覽器用戶調整字體大小后頁面矬了，怎么阻止用戶調整
//以下代碼可使Android機頁面不再受用戶字體縮放強制改變大小，但是會有1S左右延時，期間可以考慮loading來處理
if (typeof(WeixinJSBridge) == "undefined") {
document.addEventListener("WeixinJSBridgeReady", function (e) {
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
})
}, 0)
});
}else{
setTimeout(function(){
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
alert(JSON.stringify(res));
})
}, 0)
}
//IOS下可使用 -webkit-text-size-adjust禁止用戶調整字體大小
body { -webkit-text-size-adjust:100%!important; }
//最好的解決方案：最好使用rem或百分比布局
屏幕旋轉的事件和樣式
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){ }
audio元素和video元素在ios和andriod中無法自動播放
1.<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>
2.<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是不會占據任何空間
重力感應事件
// 運用HTML5的deviceMotion，調用重力感應事件
if(window.DeviceMotionEvent){
document.addEventListener('devicemotion', deviceMotionHandler, false)
}
var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
var acceleration = event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
//這里是搖動后要執行的方法
yaoAfter();
}
lastX = x;
lastY = y;
lastZ = z;
}
function yaoAfter(){
//do something
}
開啟硬件加速
.css {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
消除transition閃屏
.css {
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
}```
####JS判斷微信瀏覽器
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
return true;
}else{
return false;
}
}
####播放視頻不全屏
播放視頻不全屏
webkit-playsinline="true"
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
####H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面
<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 是否允許手動縮放
//二、JS動態判斷
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+.\d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
####移動端滾動條優化
//隱藏滾動條
margin-right: -20px;
padding-right: 20px;
::-webkit-scrollbar{ display: none }
//ios 下使其滾動平滑
-webkit-overflow-scrolling: touch
####移動端分享
手Q支持聲明meta標簽的的分享方式，例如：
一般化分享
在默認兼容舊版微信、手Q或者各種瀏覽器，平臺，可以用這樣的方法：
寫h1做標題，p做內容，img做縮略圖，只需要把h1隱藏掉就好，這里的縮略圖最好為300x300px。
