h5复制,兼容ios浏览器

问题:原生方法document.execCommand('copy')在ios端返回false,不生效,无法实现复制。

<input type="text" id="copy-input" readonly style="position: absolute;left: -1000px; z-index:-1000">
copy() {
    let input = document.querySelector('#copy-input');
    input.readOnly = "readOnly"; // 防止ios掉起键盘
    input.value = location.href; // 要复制的内容
    // ios必须先选中文字且不支持 input.select();
    this.selectText(input, 0, location.href.length);
    if (document.execCommand('copy')) {
        document.execCommand('copy');
    }else {
        console.log('不兼容');
    }
    input.blur();
},
selectText(textbox, startIndex, stopIndex) {
    // 选择文本。createTextRange(setSelectionRange)是input方法
    if (textbox.createTextRange) {//ie
        const range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart('character', startIndex);//起始光标
        range.moveEnd('character', stopIndex - startIndex);//结束光标
        range.select();
    } else {//firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex);
        textbox.focus();
    }
}

### H5 页面在苹果浏览器 Safari 中视口高度的兼容性解决方案 对于苹果设备上的 Safari 浏览器,存在因地址栏、菜单栏或工具栏影响视口高度而导致的内容显示不全问题。为了确保页面内容能够正确适应各种屏幕尺寸并保持良好的用户体验,可以采用 `viewport-fit=cover` 属性以及 CSS 的环境变量(environment variables),如 `safe-area-inset-*` 来调整布局。 #### 使用 Meta Viewport Fit Cover 通过设置 `<meta>` 标签中的 `viewport-fit=cover` 参数可以让网页内容扩展至整个屏幕空间,即使有原生控件占据了一定的空间也不会裁剪掉网页内容[^2]: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> ``` 这使得页面能够在 iPhone X 及更新机型上充分利用全面屏特性的同时避免顶部状态栏覆盖重要信息。 #### 应用 Safe Area Inset Environment Variables 针对 iOS 版本低于 11.2 的情况,可以通过检测是否存在特定的安全内边距属性来实现向后的兼容处理方式。具体做法是在样式表里加入如下规则以防止页面被系统UI组件遮挡: ```css /* 对于支持 safe-area-inset 的新版本 */ body { padding-top: env(safe-area-inset-top); } /* 或者更通用的方式 */ .container { min-height: 100vh; height: calc(100% - env(safe-area-inset-top)); } ``` 上述方法利用了现代CSS提供的环境查询功能,自动计算出适合当前设备的安全距离,从而动态调整容器的高度或其他维度参数,保证视觉呈现的一致性和完整性。 此外,还需注意监听窗口大小的变化事件,当软键盘弹起改变视窗尺寸时及时作出响应,比如锁定页面滚动位置或者重新设定某些元素的位置和大小等操作[^1]。 综上所述,结合以上两种技术手段可有效提升移动端 Web 应用程序在 Apple 设备尤其是最新款式的适配表现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值