配置代理方法
查看文档
基础规范集合
移动端横版1屏内适配方法-PC一屏内也可用
<![CDATA[<script>
//屏幕适应
var screenchange = {
width: 1624, //设计稿宽度
height: 750,
zoom: 100,
w: 0,
resize: function () {
var html = document.documentElement;
var w = html.clientWidth,
h = html.clientHeight;
if (this.w != w) {
if (w / h > this.width / this.height) {
this.zoom = (h / this.height) * 100
} else {
this.zoom = (w / this.width) * 100;
}
html.style.fontSize = this.zoom + "px";
this.w = w;
var fontSize = window.getComputedStyle(html).fontSize.replace('px', '');
if (fontSize != this.zoom) {
html.style.fontSize = this.zoom * (this.zoom / fontSize) + "px";
}
}
},
fn: function () {
var self = screenchange;
//console.log('重新计算font')
setTimeout(function () {
self.resize()
}, 50)
},
fset: null,
init: function () {
this.resize();
var self = screenchange;
self.fset = setInterval(function () {
self.resize()
}, 300);
window.addEventListener("load", function () {
self.resize();
setTimeout(function () {
clearInterval(self.fset);
}, 5000)
}, false);
window.addEventListener("resize", this.fn, false);
},
};
screenchange.init();
</script>]]>
PC一屏内也可用-参考示例
游戏内不支持手机旋转-横竖屏转换
smoba_rotate=1
一般游戏内默认不支持手机旋转，以往是需要在活动链接上配置参数smoba_rotate=1来支持旋转
配置入口的时候加下smoba_rotate=1参数试下
index.html?smoba_rotate=1（王者处理方法）
应该是竖屏和横屏都有参数可以控制的，具体要看这个游戏产品线有支持
meta标签
单位- rem：
<![CDATA[<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="format-detection" content="telephone=no">]]>
单位- px：
<![CDATA[<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
<meta name="format-detection" content="telephone=no">]]>
设置webview字体大小不受系统修改而改变
<![CDATA[(function () {
if (window.HiSpaceObject) {
window.HiSpaceObject.setTextSizeNormal();
}
})();]]>
重置input\select样式
<![CDATA[*{-webkit-appearance:none;-webkit-text-size-adjust:none;}
select{-webkit-appearance:none}
input::placeholder{color: #d1d4d8;}]]>
滚动条 样式设置
<![CDATA[.scroll::-webkit-scrollbar {width: .1rem;height: 1px;}
.scroll::-webkit-scrollbar-thumb {border-radius: .1rem;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #6f5536;}
.scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: .1rem;background: #dac2a2;}]]>
常用小组件
前端组件
PC相互跳转
H5里跳转到PC
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
判断微信、手Q
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
alert('isWeiXin')
$('.weixin').show();
$('.qq').hide();
}else if(ua.indexOf('qq/')!= -1){
alert('isQQ')
}else{
alert('非QQ 非微信')
}
}
PUBGM适配
<![CDATA[(function (win, doc) {
if (!win.addEventListener) return;
function setFont() {
var html = document.documentElement;
var k = 1136, h = 640 ,cw = html.clientWidth, ch = html.clientHeight, z;
html.style.fontSize = cw / k * 100 + "px";
if(cw/ ch >= k/h) {
z = ch/h * k/cw;
}
else z = 1;
$('.wrap-cont,.pop').css({
'transform':'scale('+ z +')',
'-webkit-transform':'scale('+ z +')'
});
$('.page-bg').css({
'background-size': 16* z +'rem auto'
});
}
setFont();
setTimeout(function () {
setFont();
}, 300);
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
})(window, document);]]>
深/浅色模式判断
//深色模式
function isDarkMode() {
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// 使用示例
if (isDarkMode()) {
// 用户启用了深色模式
alert('深色模式')
} else {
// 用户没有启用深色模式
alert('正常模式');
}
@media (prefers-color-scheme: dark) {
body,html{background: #000;color:#fff;}
.wrap .light{color:#ff0;}
}
@media媒体查询-断点式
<![CDATA[/* 默认样式适用于所有设备 */
/* 媒体查询：手机 */
@media only screen and (max-width: 767px) {
/* 在宽度小于等于767px时应用的样式 */
/* 可以根据手机的屏幕宽度来调整样式 */
}
/* 媒体查询：iPad */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
/* 在宽度在768px到1024px之间时应用的样式 */
/* 可以根据iPad的屏幕宽度来调整样式 */
}
/* 媒体查询：PC */
@media only screen and (min-width: 1025px) {
/* 在宽度大于1024px时应用的样式 */
/* 可以根据PC的屏幕宽度来调整样式 */
}]]>
分辨率判断
<![CDATA[//屏幕适应
(function (win, doc) {
if (!win.addEventListener) return;
let html = document.documentElement;
let body = document.body;
const pcPageNode = document.querySelector(`#pcPage`);
let userAgent = navigator.userAgent;
let isAndroid = /(?:Android)/.test(userAgent);
let isFireFox = /(?:Firefox)/.test(userAgent);
const setFont = () => {
let html = document.documentElement;
let body = document.body;
let pcPageNode = document.querySelector('#pcPage');
let screenRatio = html.clientWidth / html.clientHeight;
const standardRatio = +(400 / 724).toFixed(2);
const tableRatio = +(2.3 / 3).toFixed(2);
const k = 750;
html.style.fontSize = html.clientWidth / k * 100 + "px";
console.log(`标准尺寸:${standardRatio}，平板比例：${tableRatio},当前比例：${screenRatio}`)
if (screenRatio >= tableRatio) {
console.log('tablet-screen')
html.classList.remove(`short-screen`);
html.classList.add(`tablet-screen`); //平板
// window.isTablet = true;
} else if (screenRatio >= standardRatio && screenRatio < tableRatio) {
console.log('short-screen')
html.classList.remove(`tablet-screen`);
html.classList.add(`short-screen`); // 短屏
// window.isShort = true;
} else {
html.classList.remove(`tablet-screen`, `short-screen`, `fold-screen`);
console.log('none-screen')
// window.isShort = false;
// window.isTablet = false;
}
}
setFont();
doc.addEventListener('DOMContentLoaded', setFont, false);
win.addEventListener('resize', setFont, false);
win.addEventListener('load', setFont, false);
// 适配PC端
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
document.querySelector('.pc-bg').classList.remove('hide');
}else{
document.querySelector('.pc-bg').classList.add('hide');
}
})(window, document);]]>