前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【H5】316- 移动端H5跳坑指南

【H5】316- 移动端H5跳坑指南

作者头像
pingan8787
发布2019-08-14 17:07:17
1.1K0
发布2019-08-14 17:07:17
举报
文章被收录于专栏:前端自习课

最近在一个移动端的 Web 项目中踩了很多的坑,感觉有必要把它们记录下来,分享给即将踏入移动端 Web 开发大门的朋友们,更好的解决ios和android兼容。

1.input获取焦点时,页面被放大

设置meta标签

代码语言:javascript
复制
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

2.ios input输入时白屏

这个问题貌似只有再ios9中才有 解决方法:在input的父元素上添加相对定位就行了,非常神奇

代码语言:javascript
复制
style="postion:relative;"
3.软键盘撑起页面下不来

用js控制focus blur

代码语言:javascript
复制
//input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop;
$("input").focus(function () {
  document.body.scrollTop = document.body.scrollHeight;
}).blur(function () {
  document.body.scrollTop = bfscrolltop;
});
4.new Date()设置日期在IOS的兼容问题

一般这样创建一个日期变量

代码语言:javascript
复制
var d = new Date("2017-08-11 12:00:00");

发现在iOS中不兼容,返回valid Date。 IOS中不支持 - 连接日期 需要写成

代码语言:javascript
复制
var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));
5.ios页面滚动不流畅

首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。

解决方案是:

1.让html和body固定100%(或者100vh),

2.然后再在内部放一个height:100%的div,设置overflow-y: auto;和-webkit-overflow-scrolling: touch;

代码语言:javascript
复制
.scroll-box {
  /* 模态框之类的div不能放在这个容器中 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
6.position:fixed/absolute随屏幕滚动

注:ios里貌似不支持fixed。。。这里主要指absolute 在position:fixed/absolute内加入:

代码语言:javascript
复制
-webkit-transform: translateZ(0);

抖动情况,则在内容区域,加入 :

代码语言:javascript
复制
overflow-y: auto;
7.点击元素产生背景或边框怎么去掉

ios用户点击一个链接,会出现一个半透明灰色遮罩, 如果想要禁用,可设置-webkit-tap-highlight-color的alpha值为0去除灰色半透明遮罩;

android用户点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样,可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果;

winphone系统,点击标签产生的灰色半透明背景,能通过设置<meta name="msapplication-tap-highlight" content="no">去掉;

//特殊说明:有些机型去除不了,如小米2。对于按钮类还有个办法,不使用a或者input标签,直接用div标签

代码语言:javascript
复制
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
}   
// 也可以 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone下
<meta name="msapplication-tap-highlight" content="no">
8.IOS机型margin属性无效问题?

(1) 设置html body的高度为百分比时,margin-bottom在safari里失效

(2) 直接padding代替margin

9.Ios键盘换行变为搜索?

首先,input 要放在 form里面。

这时 "换行" 已经变成 “前往”。

如果想变成 “搜索”,input 设置 type="search"。

10.iOS 1px border 实现

iOS设备上,由于retina屏的原因,1px 的 border 会显示成两个物理像素,所以看起来会感觉很粗,这是一个移动端开发常见的问题。解决方案有很多,但都有自己的优缺点。

代码语言:javascript
复制
0.5px border

从iOS 8开始,iOS 浏览器支持 0.5px 的 border,但是在 Android 上是不支持的,0.5px 会被认为是 0px,所以这种方法,兼容性是很差的。

另外一种方法是背景渐变,

CSS3 有了渐变背景,可以通过渐变背景实现 1px 的 border,实现原理是设置 1px 的渐变背景,50% 有颜色,50% 是透明。

代码语言:javascript
复制
@mixin commonStyle() {
  background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top, right top,  bottom, left top;
}


@mixin border($border-color) {
  @include commonStyle();
  background-image:linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(270deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%),
  linear-gradient(90deg, $border-color, $border-color 50%, transparent 50%);
}
11.ios与android的标签表现不一致的问题

ios和android的select标签还有input[type=”button”]在真机上的样式会有区别,所以我们可以加上这一条css来消除ios和android的样式差别:

代码语言:javascript
复制
-webkit-appearance: none;
12.打电话发短信
代码语言:javascript
复制
<a href="tel:020-11811922">打电话给:0755-10086</a>
<a href="sms:10086">发短信给: 10086</a>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-08-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端自习课 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 3.软键盘撑起页面下不来
    • 4.new Date()设置日期在IOS的兼容问题
      • 5.ios页面滚动不流畅
      • 6.position:fixed/absolute随屏幕滚动
        • 7.点击元素产生背景或边框怎么去掉
          • 8.IOS机型margin属性无效问题?
            • 9.Ios键盘换行变为搜索?
              • 10.iOS 1px border 实现
                • 11.ios与android的标签表现不一致的问题
                  • 12.打电话发短信
                  相关产品与服务
                  短信
                  腾讯云短信(Short Message Service,SMS)可为广大企业级用户提供稳定可靠,安全合规的短信触达服务。用户可快速接入,调用 API / SDK 或者通过控制台即可发送,支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达,99%到达率;国际/港澳台短信覆盖全球200+国家/地区,全球多服务站点,稳定可靠。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档