Use the viewport meta tag
Apr 6, 2014 · 1 分钟阅读

  • 完全自适应的布局可以设置 viewport 为:
<meta name="viewport" content="width=device-width,initial-scale=1">
  • 指定具体宽度时如考虑较小分辨的设备,可按设计宽度的一半设置 viewport 如:
<meta name="viewport" content="width=320">
  • 指定具体宽度时不考虑较小分辨的设备,直接按设计宽度设置 viewport 如:
<meta name="viewport" content="width=640,user-scalable=0,target-densitydpi=device-dpi">
  • 兼容性:
if (/Android (\d+\.\d+)/.test(navigator.userAgent)) {
    var version = parseFloat(RegExp.$1);
    if (version > 2.3) {
        var phoneScale = parseInt(window.screen.width) / 480;
        document.write('<meta name="viewport" content="width=480, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
    } else {
        document.write('<meta name="viewport" content="width=480, target-densitydpi=device-dpi">');
    }
} else {
    document.write('<meta name="viewport" content="width=480, user-scalable=no, target-densitydpi=device-dpi">');
}

see more: mozilla docs

← Previous Post Next Post →

Ryun的博客
与其感慨路难行,不如马上出发。

atom css design git html javascript jekyll laravel life mac mobile optimization sublime tool vscode vue
mac

About

你好,❤朋友

这里是 Ryun 的博客 📝

📝记录了我学习 🔎的过程

作为一名前端攻城狮 🦁

希望能和大家一起 🔎

共同进步 🏃

🦁的特长:

  • HTML5
  • CSS3
  • JavaScript
  • Vue.js
  • 微信小程序
  • 熟练配合 Node.js、PHP 和 Laravel
  • 熟练使用各种开发和设计工具

🦁喜欢 🆒🆒的东西

对提升效率和美感的事物有兴趣 😋

欢迎 👏交流


see this hugo-theme-dream-ink