移动端微信JSSKD相关封装
封装JSSDKimport wx from 'weixin-js-sdk' import { wechatAuthSign } from '@/api/wxApi.js' import { isWeixin } from '@/utils/function/platform.js' // 配置微信jsApiList export const setWeixinJsApiList = async
移动端壳子通讯【messageHandlers，setupWebViewJavascriptBridge】
// 手机型号 export function getMobileType() { return !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) == true ? 'ios' : 'android' } // 是否微信内 export function isWeixin() { return (window.na
移动端SPA项目非Rem转换（依赖设计稿尺寸）
index.html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="C
移动端禁止WX用户字体调整
如果用户手机字体调整太大或者太小会影响到页面布局；这时需要禁止用户调整字体大小，自适应；app.vue<script> import { isIos, isAndroid } from "@/utils/appUtils.js"; export default { name: "App", data() { return {
Vue + SignaturePad(canvas)实现移动端手写签名
移动端下业务需要全屏手写签名，需求：兼容横竖屏，无论横竖屏下，签字图都需要是横向显示: 插件SignaturePad一、思路分析：1 . 移动H5虽可以判断横竖屏，但考虑到多设备访问问题(微信下，有的手机需要用户开启横屏模式才可以旋转，一般人不知道怎么设置），所以强制横屏显示只能放弃。2 . 无法强制横屏，那么我们是否可以通过CSS将页面旋转达到视觉横屏效果呢？ 答案当然是可以，通过 tran
H5避坑指南 | HTML
调用系统功能使用 <a> 能快速调用移动设备的电话/短信/邮件三大通讯功能，使用 <input> 能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<!-- 拨打电话 --> <a href="tel:10086">拨打电话给10086小姐姐</a>
H5避坑指南 | CSS
自动适应布局针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明 <html> 的 font-size ，以 rem 为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。笔者通常将 rem 布局比例设置成 1rem=100px ，即在设计图上 100px 长度在CSS代码上使用 1rem 表示。functi
H5避坑指南 | Javascript
禁止点击穿透移动端浏览器里点击操作会存在300ms延迟，往往会造成点击延迟甚至点击无效，这个是众所周知的事情。2007年苹果发布首款iPhone搭载的Safari为了将桌面端网站能较好地展示在移动端浏览器上而使用了双击缩放。该方案就是上述300ms延迟的主要原因，当用户执行第一次单击后会预留300ms检测用户是否继续执行单击，若是则执行缩放操作，若否则执行点击操作。鉴于该方案的成功，其他移动端浏览