meta设置与去除默认样式--移动端开发整理笔记(一)

视口设置:

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=.5,minimum-scale=.5,maximum-scale=1">
  • 默认不设置viewport一般可视区宽度在移动端是980

  • width 可视区的宽度 (number||device-width)

  • user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (一般禁止掉)

  • initial-scale 初始缩放比例

  • minimum-scale 最小缩放比例

  • maximum-scale 最大缩放比例

  • window.devicePixelRatio(像素比把一个像素 放大至 N个像素去显示)

常用meta设置

<meta name="x5-orientation" content="portrait|landscape /> //QQ强制横屏或竖屏显示
<meta name="x5-fullscreen" content="true" /> //QQ设置全屏
<meta name="screen-orientation" content="portrait"> //UC强制横屏或竖屏显示
<meta name="full-screen" content="yes"> //UC全屏显示
<meta name="format-detection" content="telephone=no, email=no" /> //禁止识别电话号码和邮箱号码


<a href="tel:18888888888">请拨打电话18888888888</a> // 拨打电话
<a href="mailto:motao@motao.com">请发送邮件</a>  //发送邮件

去除默认样式

a,input,button{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}     // 清除点击阴影 

button {-webkit-appearance: none;border-radius: 0;}        //清除按钮圆角 

body {font-family: Helvetica;}   //Web端大多数的字体在移动端没有,可以设置这个字体

body * {-webkit-text-size-adjust: 100%;   //禁止文字缩放
    -webkit-user-select: none; 

}

移动端的其他问题

Font Boosting

在一段文字我们没有给他设置高度的时候,在webkit内核下,文字的大小被浏览器放大了

解决办法:

1.设置高度

2.设置最大高度 max-height

rem计算

meta设置与去除默认样式--移动端开发整理笔记(一)

上一篇:mybatis配置约束config,mapper


下一篇:android通过web与后台数据库交互