search

hexuanzhang / front-end

前端资源及文章
2 stars 0 forks source link

移动端问题汇总 #6

Open hexuanzhang opened 8 years ago

hexuanzhang commented 8 years ago

1.页面字体放大

当页面中的标签数量或者文本数量大于某一个值，或者当CSS定义的字体大小落在某个区间时，页面字体会变大。而且字体变大后的值也随着原始定义的字体大小而改变。

解决方法

为文本元素指定宽高或者将其max-height设置为100% label{ max-height: 100%; }

参考资料

https://github.com/amfe/article/issues/10

hexuanzhang commented 8 years ago

2.禁用拨号、发送邮件功能

在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像电话号码的数字处理为电话链接，比如：

解决方法

通过如下的meta来关闭电话号码及邮箱的自动识别。 <meta content="telephone=no,email=no" name="format-detection">

hexuanzhang commented 8 years ago

3.开启拨打电话、发送短信及发送邮件功能

在某些业务场景下需要使用拨号、短信功能，以及发送邮件。

解决方法

可通过下面的方法开启对应的功能

  1. 开启电话功能：<a href="tel:123456">123456</a>
  2. 开启短信功能：<a href="sms:123456">123456</a> 3.开启邮件发送功能：<a href="mailto:test@gmail.com">test@gmail.com</a>
hexuanzhang commented 8 years ago

4.禁止百度转码

通过百度手机打开网页时，百度可能会对网页进行相应的转码。

解决方法

可以通过meta标签来禁止转码 <meta http-equiv="Cache-Control" content="no-siteapp" />

参考资料

http://seofangfa.com/mobile-seo/baidu-no-siteapp.html

hexuanzhang commented 8 years ago

5.添加到主屏相关设置(ios)

当网站添加到主屏幕时，需要设置相应的标题、图标、启用时全屏模式、状态太烂的背景色等。

解决方法

  1. 添加到主屏后的标题： <meta name="apple-mobile-web-app-title" content="测试">
  2. 启用全屏模式（隐藏地址栏）： <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes">
  3. 设置状态栏的背景颜色： 只有在 "apple-mobile-web-app-capable" content="yes" 时生效。 content 参数：
    • default ：状态栏背景是白色。
    • black ：状态栏背景是黑色。
    • black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  4. 添加到主屏后的APP图标 指定web app添加到主屏后的图标路径，有两种略微不同的方式：
    • apple-touch-icon：在IOS6及以下的版本会自动为图标添加一层高光效果(包括圆角，阴影，反光)
    • apple-touch-icon-precomposed：使用“设计原图图标”
      <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
      <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
      <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
      <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
      <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone6-plus.png">
  5. Web app启动动画 通过设置apple-touch-startup-image可以为WebApp设置一个类似NativeApp的启动画面。
    启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小。
    在iPhone及iTouch设备上，只支持竖屏模式，图片分辨率为320×460。在iPad上支持竖屏和横屏两种模式，分辨率分别为768x1004和748x1024，注意横屏模式的图片宽高以及内容显示方式。
    <link rel="apple-touch-startup-image" href="/startup-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
    <link rel="apple-touch-startup-image" href="/startup-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
    <link rel="apple-touch-startup-image" href="/startup.png" media="screen and (max-device-width: 320)" />
  6. 添加智能App广告条 Smart App Banner
    这是 iOS 6 之后 Safari 默认支持的功能，通过,meta 信息指定 App ID 和 URL即可。
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

参考资料

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

https://mathiasbynens.be/notes/touch-icons

http://www.motype.org/post/design/apple-touch-startup-image

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html

https://github.com/LazyFE/Task/issues/14

https://developer.apple.com/library/iad/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27

hexuanzhang commented 8 years ago

6.input相关样式调整

在移动端，input框有不同的表现，为了保持一致性，需要调整input输入框原有表现。

解决方法

  1. 清除输入框内阴影 在iOS上，输入框默认有内阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以使用下面方式关闭： input, textarea { -webkit-appearance: none; }
  2. input在获取焦点时 placeholder 没有隐藏 input:focus::-webkit-input-placeholder{ opacity: 0;}
  3. 搜索时键盘的回车按钮文字设定为“搜索” input 使用 type="search"，放在 form 表单内。就能使输入法中的回车按钮文字变为“搜索”。 `

    `

  4. input 输入框调出数字输入键盘 <input type="number"/> <input type="number" pattern="[0-9]*" /> <input type="tel" /> 单独使用 type="number" 时候， iOS 上出现并不是九宫格的数字键盘，如果需要九宫格的数字键盘，可选择使用 2、3 的方法。 1、2、3 在 Android 上均可以唤起九宫格的数字键盘。 keyboard_number
  5. 取消input及a标签touch高亮效果 a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，可以使用下面方式关闭： html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
hexuanzhang commented 8 years ago

7.禁止长按出现菜单栏

使用 a标签或img标签时，移动端长按会出现一个 菜单栏。

解决方法

a, img { -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/ }

注意事项：

  1. 安卓及ios微信浏览器中，这个属性无效；
  2. 安卓浏览器中这个属性同样无效；
hexuanzhang commented 8 years ago

8.文字超出断行显示省略号

根据业务需求，有时候需要对标题或文案信息进行截断。通常有单行文本和多行文本截断。

解决方法

  1. 单行文本截断并显示省略号(块级元素起效)。 label{ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  2. 多行文版截断并出现省略号的纯CSS方法，其中的 -webkit-line-clamp: 2 即用来控制文本超出两行时截断并出现省略号。 在使用中如果出现第三行文字露一点头出来的问题，设置合理的 line-height 即可解决。 label{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }