1.关于苹果手机和安卓手机的判断方法
var u= navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //iOS终端
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //安卓终端
2.关于苹果手机全面屏判断方法
var rate= window.screen.height/ window.screen.width;
var limit= window.screen.height== window.screen.availHeight? 1.8 : 1.65;// 临界判断值
var result = rate> limit ? '是全面屏'：‘不是全面屏’;
3.关于是否是用微信打开前端页面判断
function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
// 不加window部分Android机会显示不了提示图，即判断不了是否是微信
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
}
4.flex布局在iphone 6上不兼容的问题
display:flex → display:-webkit-flex
justify-content:space-between;→-webkit-justify-content:space-between
align-items:center;→-webkit-align-items:center
flex-direction:column;→ webkit-flex-direction:column;
flex-wrap:wrap;→ webkit-flex-wrap:wrap;
5.苹果手机公众号输入框焦点问题
@onblur="loseFocus"
function loseFocus() {
var ua= navigator.userAgent.toLowerCase();
var u= navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(ua.match(/MicroMessenger/i)== 'micromessenger' && !!u) {
var currentPosition, timer;
var speed= 0;//页面滚动距离
timer = setInterval(function() {
currentPosition= document.documentElement.scrollTop|| document.body.scrollTop;
currentPosition-= speed;
window.scrollTo(0, currentPosition);//页面向上滚动
currentPosition += speed; //speed变量
window.scrollTo(0, currentPosition);//页面向下滚动
clearInterval(timer);
},1);
}
}
6.利用js动态添加css，可参照2，因为在苹果公众号，全面屏和非全面屏，同样的css显示字体实际大小不一样，所以按照需要加载不同的css
var head= document.head|| document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type= 'text/css';
head.appendChild(style);
style.innerHTML= ".cell-bottom {font-size: 0.14rem;}.cell-bottom .time {font-size: 0.16rem;}";
7.safari浏览器（苹果手机）处理字符串转时间兼容问题
2020-04-01 00:00:00 safari只识别‘/’
item.endDate.replace(/\-/g, "/")
8.文字在苹果手机公众号上下不居中问题，及line-height 问题
在公众号开发中慎用，慎用，慎用 line-height让文字上下居中，因为在苹果公众号上，文字会自动偏下，苹果公众号会自动为元素添加padding
解决方法，不设置有背景色的标签的高度，用padding来达到设置高度的目的（非常重要）
9.margin padding 问题
父标签中第一个子标签设置margin-top 不起作用，这个margin-top的值会自动转化为父标签的margin-top,此时用父标签的padding代替
10.按钮中放图片问题
11.设置padding和margin均为0的情况下，标签之间仍有空格问题
代码换行，编辑器空格问题
12.微信公众号开发js文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3
关闭浏览器方法
document.addEventListener('WeixinJSBridgeReady',function(){ WeixinJSBridge.call('closeWindow'); },false);
WeixinJSBridge.call('closeWindow');
13.公众号和浏览器返回上个界面问题
history.pushState(null,null,document.URL);
window.addEventListener('popstate',function () {history.pushState(null,null,document.URL); });
window.addEventListener("popstate",function(e) {location.href="test.html"},false); 接收事件
14.关于通用的上中下布局 ，上面高度固定，下面内容自动填充，中间随上下位置改动，内容多的情况滑动
* {margin: 0;padding: 0;}html {height: 100%;}body {height: 100%;}
.bodyPage {height: 100%;display: flex;flex-direction: column;}
.head {height: 100px;background: green;}
.content {flex: 1;margin: 20px 0;background:lightblue;overflow: scroll}
.foot {background: blue;margin-bottom: 20px;}
15.隐藏公众号右上角分享按钮
function onBridgeReady() {
WeixinJSBridge.call('hideOptionMenu');
}
if (typeof WeixinJSBridge== "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady,false);
}else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else {
onBridgeReady();
}
16.自定义分享和调用微信的功能
1.文档链接https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3
2.首先需要配置，配置文件检测链接 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
3.配置签名生成步骤 accesstoken--->jsapi_ticket----->通过微信提供的后台代码
4.获取accesstoken链接：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wappid + "&secret=" + secret
5.获取jsapi_ticket链接：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
17.用户信息获取
第一步：用户同意授权，获取code
第二步：通过code换取网页授权access_token
第三步：刷新access_token（如果需要）
第四步：拉取用户信息(需scope为 snsapi_userinfo)
18。全面解决Html页面缓存的问题 链接：https://www.cnblogs.com/gluncle/p/9680520.html
html
js和css