H5 移动端注意点

  1. 使用 rem 作为单位

给手机这是 100px 的字体大小, 对于320px 的手机匹配是100px, 其他手机都是按比例分配, 因此设计稿上多少像素的话, rem = 设计稿像素/100

  1. 禁用 a, button, input, opigroup, select, textare 等标签背景变暗

在移动端使用 a 标签作为按钮或文字链接的时候, 点击按钮会出现一个暗色背景, 需要在 css 中加入

a, button, input, textarea, optgroud, select{
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
`</pre>
  1. meta 基础知识

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

    `<meta name="viewport" content="width=device-width,initial-width:1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    `

    忽略页面中的数字识别为手机号

    `<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"/>
    `
  2. 移动端定义字体

    `body{
      font-family:"Helvetica Neue", Helvetica, sans-serif;
    }
    `
  3. 设置拨打电话

    `<a href="tel:1242432423">1242432423</a>
    `
  4. 设置发送短信

    `<a href="sms:123124325434">123124325434</a>
    `
  5. 设置发送邮箱

    `<a href=”mailto:131321@21312.com“>发送邮件</a>

8, calc 语法, 兼容 IE9+, FF4.0, Chrome19+, Safari6+

<Script> 小知识

<script> 按照出现顺序被执行

  • 后加载的脚本可以依赖先加载的脚本, 但是先加载的脚本堵塞, 整个网页的加载会堵塞.
  • 当一个脚本被执行时, 可以访问前面的 HTML 元素, 但不能访问后面的元素.
  • 页面元素在他之前的所有脚本都加载完之前是不会执行渲染的.

asyncdefer

HTML5 添加了两个工具用于控制脚本的执行

  • async 表示”不用马上执行”. 定义一个页面需要的变量或函数在async中是不行的, 因为你没法知道什么时候async代码会执行
  • defer 表示”等待页面解析完成之后执行”, 大致等价于把脚本绑定到window.onload事件. 当这个代码被执行, DOM 中的一切元素都可以访问, 不同于async, 所有加了defer的脚本会按照他们出现在 HTML 中的顺序执行, 只是推迟到页面解析后按顺序执行.

type 属性

设定解释器
若要修改 type 的默认属性(默认为 javascript), 可以通过一个标记实现:
&lt;meta http-equiv = "Content-Script-Type" content = "text/vbscript"

integrity 属性

integrity属性是子资源完整性新规范的一部分, 他允许你为脚本文件将包含的内容提供一个 hash, 这意味着可以防止在传输的时候内容丢失或被恶意修改. 就算使用了 SSL, 这个规范也是有意义的, 因为有时候你要加载的资源是你无法控制的站外资源.
如果你选择使用他, 就要在<script>标记里添加一个 hash 类型以及 hash 值, 将他们以连字符分隔
&lt;script src="..." integrity = "hash-value"&gt;&lt;/script&gt;

document.currentScript

IE 不支持的一个新东西叫 document.currentScript, 他指向当前正在执行的脚本, 如果你要从你嵌入的<script>中拿一些属性用

<script>和 innerHTML

通过 DOM 动态添加到页面上的 <script> 会被浏览器执行

var myScript = document.createElement("script");
myScript.textContent = "alert('hello')";
document.head.appendChild(myScript);

然而, 通过innerHTML动态添加到到 HTML 的 <script> 则不会被执行
document.head.innerHTML += "&lt;script&gt;alert('Hello')&lt;/script&gt;"
Note: 但是他会显示在 HTML 里(尽管不会执行)

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×