前言 整理一些在移动端H5开发常见的问题给大家做下分享,这里很多是自己在开发过程中遇到的大坑或者遭到过吐糟的问题,希望能给大家带来或多或少的帮助,喜欢的大佬们可以给个小赞,如果有问题也可以一起讨论下。 html 篇常用的meta属性设置 meta对于移动端的一些特殊属性,可根据需要自行设置 - <meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
- <meta name="full-screen" content="yes"> //全屏显示
- <meta name="browsermode" content="application"> //UC应用模式,使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。
- <meta name="x5-orientation" content="portrait"> //QQ强制竖屏
- <meta name="x5-fullscreen" content="true"> //QQ强制全屏
- <meta name="x5-page-mode" content="app"> //QQ应用模式
复制代码电话号码识别 在 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接,比如: 关闭识别 - <meta name="format-detection" content="telephone=no" />
复制代码开启识别 - <a href="tel:123456">123456</a>
复制代码邮箱识别(Android) 安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的 meta 来管别邮箱的自动识别: - <meta content="email=no" name="format-detection" />
复制代码同样地,我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能: - <a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
复制代码 css 篇0.5px细线 移动端 H5 项目越来越多,设计师对于 UI 的要求也越来越高,比如 1px 的边框。在高清屏下,移动端的 1px 会很粗。 那么为什么会产生这个问题呢?主要是跟一个东西有关,DPR(devicePixelRatio) 设备像素比,它是默认缩放为 100%的情况下,设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2(iPhone 8),或者 3(iPhone 8 Plus)。拿 2 倍屏来说,设备的物理像素要实现 1 像素,而 DPR=2,所以 css 像素只能是 0.5。 下面介绍最常用的方法 - /* 底边框 */
- .b-border {
- position: relative;
- }
- .b-border:before {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- height: 1px;
- background: #d9d9d9;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- /* 上边框 */
- .t-border {
- position: relative;
- }
- .t-border:before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 1px;
- background: #d9d9d9;
- -webkit-transform: scaleY(0.5);
- transform: scaleY(0.5);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- /* 右边框 */
- .r-border {
- position: relative;
- }
- .r-border:before {
- content: '';
- position: absolute;
- right: 0;
- bottom: 0;
- width: 1px;
- height: 100%;
- background: #d9d9d9;
- -webkit-transform: scaleX(0.5);
- transform: scaleX(0.5);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- /* 左边框 */
- .l-border {
- position: relative;
- }
- .l-border:before {
- content: '';
- position: absolute;
- left: 0;
- bottom: 0;
- width: 1px;
- height: 100%;
- background: #d9d9d9;
- -webkit-transform: scaleX(0.5);
- transform: scaleX(0.5);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- /* 四条边 */
- .setBorderAll {
- position: relative;
- &:after {
- content: ' ';
- position: absolute;
- top: 0;
- left: 0;
- width: 200%;
- height: 200%;
- transform: scale(0.5);
- transform-origin: left top;
- box-sizing: border-box;
- border: 1px solid #e5e5e5;
- border-radius: 4px;
- }
- }
复制代码屏蔽用户选择 禁止用户选择页面中的文字或者图片 - div {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
复制代码清除输入框内阴影 在 iOS 上,输入框默认有内部阴影,以这样关闭: - div {
- -webkit-appearance: none;
- }
复制代码如何禁止保存或拷贝图像 代码如下 - img {
- -webkit-touch-callout: none;
- }
复制代码
输入框默认字体颜色 设置 input 里面 placeholder 字体的颜色 - input::-webkit-input-placeholder,
- textarea::-webkit-input-placeholder {
- color: #c7c7c7;
- }
- input:-moz-placeholder,
- textarea:-moz-placeholder {
- color: #c7c7c7;
- }
- input:-ms-input-placeholder,
- textarea:-ms-input-placeholder {
- color: #c7c7c7;
- }
复制代码用户设置字号放大或者缩小导致页面布局错误 设置字体禁止缩放 - body {
- -webkit-text-size-adjust: 100% !important;
- text-size-adjust: 100% !important;
- -moz-text-size-adjust: 100% !important;
- }
复制代码android系统中元素被点击时产生边框 部分android系统点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下 - a,button,input,textarea{
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- -webkit-user-modify:read-write-plaintext-only;
- }
复制代码iOS 滑动不流畅 ios 手机上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。 iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。 解决方案 1、在滚动容器上增加滚动 touch 方法 - .wrapper {
- -webkit-overflow-scrolling: touch;
- }
复制代码2、设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动,超出的部分 body 隐藏。 - body {
- overflow-y: hidden;
- }
- .wrapper {
- overflow-y: auto;
- }
复制代码
|