用CSS做iOS和Android样式适配

在移动端webview渲染的时候,html标签会被自动加入一个class属性,会标识不同的设备
如:

  • android上是 android mobile
  • iPhone上是 ios phone mobile
  • iPad上是 ios ipad tablet
  • PC和Mac上的Chrome不会插入这个class属性
Android

iPhone

iPad
macOS上Chrome

所以,可以用来适配一些移动双端的差异场景,如适配不同高度Titlebar

不同样式:

.ios .titlebar {
  height: 80px
}

.android .titlebar {
  height: 60px
}

使用样式:

<div class="titlebar">
  <!-- 使用 -->
</div>

在iOS设备上就会展示80px,Android设备上60px

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 有时候,会感觉到内心有一种无法言说的冲动,支持者一定要去完成某件事情。并且会以最为精确的处理方式,最为恰当的速度冲...
    岚升阅读 146评论 0 2
  • 坚持分享30天, 2020年 2月1日。 这段时间因为冠状病毒疫情严重,基本上都是在家,家里过年备的馒...
    青青草_f99c阅读 78评论 0 0
  • 位于山景城的谷歌总部占地29万平方米,拥有2万名员工(谷歌员工总共12万)总部有30多家不同风味的餐厅,为来...
    悠悠岁月故事多阅读 783评论 4 7
  • 入简七个月,更文一百天。会卡三百六,集钻近三千。原创长和短,二百二十篇。被锁十数文,几时得平冤。荷塘月色舞,江湖草...
    岩屋洞小五阅读 1,297评论 34 45