H5移动端全局样式

@charset "utf-8";  
* {
    /* -moz-none 子元素所有文字多不能选择,除掉input输入域中的文字。
        none 子元素所有的文字都不能选择,包括input输入域中的文字。
        -moz-all 子元素所有的文字都可以被选择,但是input输入域中的文字不能被选择。
    */
    moz-user-select: -moz-none;  /* 子元素不能选中文字 */
    -moz-user-select: none;   /* 子元素不能选中文字 */
    -ms-user-select: none;   /* 兼容 */
    user-select: none;       /* 兼容 */
    /* text: 可以选择文本
       all: 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
       element: 可以选择文本,但选择范围受元素边界的约束
    */
    -o-user-select: none;  /* 文本不能被选中 */
    -khtml-user-select: none; /* -khtml-苹果浏览器的文本不能选中 */
    -webkit-user-select: none; /* -webkit-苹果浏览器的文本不能选中 */
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;  /* 移动端字体 */
}
body{
    /* 属性控制元素在移动设备上是否使用滚动回弹效果. */
    -webkit-overflow-scrolling: touch; 
    overflow-y:auto;
    /* 不显示默认的高亮颜色 */
    -webkit-tap-highlight-color: transparent
}
html{
    color:#000;
	background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img{
	border:none;
}
input,select,textarea{
    outline:none;  /* 选中文本框取消蓝边 */
    /*清除移动端默认的表单样式*/
    -webkit-appearance: none;
} 
/* placeholder属性 */
::-webkit-input-placeholder {
color: mediumvioletred;
text-indent: 5px;
}
textarea{
    /* 控制textarea不可由用户调整尺寸大小
        both 可以由用户调整尺寸大小
    */
    resize:none;
}
a{
    text-decoration:none;  /* 取消下划线 */
    color: #333;
    /*去除点击按钮,有灰色阴影*/
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
table {
	border-collapse:collapse;  /* 为表格设置合并边框模型 实线 */
	border-spacing:0; /* 外线间距 */
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}
ol,
ul {
	list-style:none;
}
caption,
th {
	text-align:left;
}
/* 万能清除浮动*/

.clearfix:after{
    content: '';
    display:block;
    clear:both;
}
### 解决UniApp开发H5移动端兼容性问题 为了确保UniApp开发的H5应用在不同移动设备上的良好表现,需考虑多个方面来提升兼容性和用户体验。 #### 处理屏幕方向变化 对于横屏适配这一常见需求,在H5端默认情况下并不支持自动切换至横屏显示。针对此情况,可以通过监听窗口的方向改变事件,并通过CSS强制设置页面布局适应新的屏幕尺寸[^2]: ```javascript 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]: ```html <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]: ```css /* 添加于全局样式 */ body.locked-scroll{ overflow:hidden !important; /* 阻止溢出滚动条 */ } textarea, input[type='text'], input[type='password']{ position:relative; z-index:1; /* 提升层级避免被其他元素遮挡 */ } ``` ```javascript 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构建的应用程序在其目标平台上的一致性和稳定性,从而提供更加流畅稳定的交互效果给最终用户。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值