uniapp开发h5 移动端兼容

### 解决UniApp开发H5移动端兼容性问题

为了确保UniApp开发的H5应用在不同移动设备上的良好表现，需考虑多个方面来提升兼容性和用户体验。

#### 处理屏幕方向变化
对于横屏适配这一常见需求，在H5端默认情况下并不支持自动切换至横屏显示。针对此情况，可以通过监听窗口的方向改变事件，并通过CSS强制设置页面布局适应新的屏幕尺寸[^2]：

window.addEventListener('orientationchange', function() {
    if (window.orientation === 90 || window.orientation === -90) {
        document.body.classList.add('landscape');
    } else {
        document.body.classList.remove('landscape');
    }
});

#### 文件下载功能优化
当涉及到文件下载操作时，由于各品牌手机内置浏览器的行为差异较大，因此需要特别处理以保证最佳体验。可以采用如下策略：先判断当前环境是否为移动端；如果是，则创建隐藏表单提交请求或利用`<a>`标签配合JavaScript触发下载行为[^3]：

<a id="downloadLink" style="display:none;"></a>
<script type="text/javascript">
function downloadFile(url){
    var link = document.getElementById('downloadLink');
    link.href = url;
    link.download = ''; // 设置为空字符串表示跟随服务器响应头中的filename字段
    link.click();
}
</script>

#### 输入框焦点管理
部分iOS版本存在输入法弹出后导致页面布局错乱的问题。对此可采取措施是在失去焦点时重置滚动位置或将整个视口锁定在一个固定的高度范围内防止抖动现象发生[^4]:

/* 添加于全局样式 */
body.locked-scroll{
    overflow:hidden !important; /* 阻止溢出滚动条 */
}

textarea, input[type='text'], input[type='password']{ 
    position:relative; z-index:1; /* 提升层级避免被其他元素遮挡 */ 
}

document.querySelectorAll('input, textarea').forEach(function(el){
    el.addEventListener('focusin', function(){
        document.documentElement.style.overflowY = 'hidden';
        setTimeout(() => {document.querySelector('.content-wrapper').style.height = `${window.innerHeight}px`;}, 0);
    });
    
    el.addEventListener('blur', function(){
        document.documentElement.style.overflowY = '';
        document.querySelector('.content-wrapper').removeAttribute('style');  
    });
});

以上方法能够有效改善基于UniApp构建的应用程序在其目标平台上的一致性和稳定性，从而提供更加流畅稳定的交互效果给最终用户。