移动端常见问题

Posted 2020-09-26 另一种感觉

移动端的页面多数情况下用百分比或者媒体查询来设置页面的宽高度 这样会达到响应的效果

这里解释几点

1.-webkit-tap-highlight-color: rgba(0,0,0,0);也可以写成-webkit-tap-highlight-color: transparent; 去掉点击时高光显示 你也可以更改里面的参数 达到你想要的点击显示高光效果

2.-webkit-touch-callout: none; //长按页面时不触发系统菜单

3.-webkit-user-select: none; //长按无法选择文本 这个很有用 一般如果body里面没有添加这个属性的手机页面 当我们长按某段文字的时候就会出现选中这段文字弹出“复制，全选”等选项 但在webapp开发里 这个就显得很不友好 所以尤其是在webapp开发的时候 为了达到与native一样的真实效果 必须的添加

4.html,body{ width: 100%; height: 100%;} 这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置

5.main和子级的height都设置为auto 你也可以不用设 但如果你的页面是允许滚动的话最好还是要设一下

6.我们把menu使用固定定位到页面底部 你也可以把他定位在顶部 或任何你想定位的地方

7.menu 里面的tab我们使用的是百分比分配 因为有border-right所以不能很准确的分配多少 这个应该会有什么更精准的方法平均分配 待研究(弹性盒模型)