移动端、微信开发注意事项

1、ios调起键盘，页面没有恢复问题（fixed定位缺陷导致）

this.$nextTick(() => {window.scrollTo(0, 0);
});

也可以使用iScroll插件进行解决。
iScroll链接地址：http://caibaojian.com/iscroll-5/
较详细解说CSDN：https://blog.csdn.net/weixin_34102807/article/details/91467605
2、阻止旋转屏幕时自动调整字体大小

* {-webkit-text-size-adjust: none;
}

3、修改移动端点击高亮效果

* {-webkit-tap-highlight-color: rgba(0,0,0,0);
}

4、iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

5、禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

6、禁止 iOS 弹出各种操作窗口

*{-webkit-touch-callout: none;
}

7、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发,以及禁止图片长按放大保存、点击穿透（）

*{pointer-event:none;
}

8、input的placeholder会出现文本位置偏上

input{line-height：normal;
}

9、使用vue-cli proxyTable进行反向代理，解决跨域问题

//1.在config/index.js文件中配置：
proxyTable: {'/api': {target: 'http://www.example.com', // your target hostchangeOrigin: true, // needed for virtual hosted sitespathRewrite: {'^/api': ''  // rewrite path}}
}
//2.使用http-proxy-middleware插件对api请求地址进行代理
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {var options = proxyTable[context]if (typeof options === 'string') {options = { target: options }}app.use(proxyMiddleware(options.filter || context, options))
})

10、图片等比缩放


<div class="parent"><img :src="imgSrc" alt="">
</div><style lang="stylus" scoped>
//竖屏
.parent {width: 100px;height: 100px;display: flex;align-items: center;img {width :100%;height: auto;}
}//横屏附加代码
@media (orientation: landscape) {img {width autoheight 100%margin auto}
}
</style>

11、消除transition闪屏问题

*{/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/-webkit-transform-style: preserve-3d;/*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/ -webkit-backface-visibility: hidden;
}

转载地址：https://blog.csdn.net/m0_37036014/article/details/81232648

移动端、微信开发注意事项相关推荐

微信小程序开发注意事项
第一次开发这个微信小程序,所以还是要记录一下,以防日后忘记,同时也提供给各位朋友作为参考. 1. 微信小程序注册按照步骤注册即可~ 注册地址 2. 微信商户平台注册商户平台注册的前提是:看看有没有 ...
微信分享到朋友圈、发送给朋友开发注意事项
1.invalid url domain 当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,如果使用了端口号,则配置的绑定域名也要加上端口号(一个appid可以绑定三个有效域名,见 ...
pygame开发PC端微信打飞机游戏
pygame开发PC端微信打飞机游戏一.项目简介1. 介绍本项目类似曾经火爆的微信打飞机游戏.游戏将使用Python语言开发,主要用到pygame的API.游戏最终将会以python源文件game ...
【vue+pc端】实现微信扫码登录pc端，后端通过微信开发平台，前端生成二维码（仅供参考）
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档我最 ...
开发跨端微信小程序框架选型指南
多端框架uni-app和Taro选型对比一. 背景小程序原生开发有不少槽点: 1.原生wxml开发对Node.预编译器.webpack支持不好,影响开发效率和工程构建流程.所以大公司都会用框架开发 ...
用PHP开发APP端微信支付
用PHP开发APP端微信支付的一点个人心得最近因为公司需求,要开发APP端上的微信支付,看了微信文档,感觉还不错,没有遇到太大的坑,需要注意的点不算太多. 写一个记事文档,作为备忘录. APP支付流 ...
微信开发SDK使用教程--手机微信好友发来聊天消息通知服务端
微信开发SDK使用教程--手机微信好友发来聊天消息通知服务端 case FriendTalkNotice: {// 微信好友发来聊天消息 log.debug("socket:msgtype= ...
移动端微信公众号页面开发中使用了footer标签导致页面错位
移动端微信公众号页面开发中使用了< footer>标签导致页面错位之前也用过这个标签没出现过此类问题在微信开发者工具中发现把footer 改成div 样式就正常了
混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生（安卓）交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发原生APP开发优缺点: 可以访问手机 ...

移动端、微信开发注意事项

移动端、微信开发注意事项相关推荐

最新文章

热门文章