html5可以通用的几段代码

  • A+
所属分类:HTML5+CSS3

H5页面窗口自动调整到设备宽度,并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no">

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no">

当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes">

<!-- ios7.0版本以后,safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 可选default、black、black-translucent -->

 

viewport模板——通用

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

<link rel="stylesheet" href="index.css">

这里开始内容

viewport模板 – target-densitydpi=device-dpi,android 2.3.5以下版本不支持
01

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

<meta name="format-detection" content="email=no">

 

<link rel="stylesheet" href="index.css">

这里开始内容

移动端如何定义字体font-family

中文字体使用系统默认即可,英文用Helvetica

body{font-family:Helvetica;}

移动端字体单位font-size选择px还是rem

对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可

对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考:

html{font-size:10px}

@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

@media screen and (min-width:800px){html{font-size:25px}}

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • avatar 朴人博客 0

      初学者必备

      • avatar themebetter 2

        对于初学者来说是很不错的