移动前端开发——网页适配并响应不同的分辨率的设备

要在移动设备上进行网页开发,只有明白移动设备上的 viewport ,并且掌握跟 viewport 有关的 meta 标签的使用,才能更好地让网页适配或响应各种不同分辨率的移动设备

viewport

  移动设备上的 viewport 就是设备屏幕上能用来显示网页的区域。

  视口当前可见的部分叫做可视视口(visual viewport)
可视视口可能会比布局视口layout viewport )更小,因为当用户缩小浏览器缩放比例时,布局视口不变,而可视视口变小了 。

  ideal viewport 是最适合移动设备的 viewport,ideal viewport 的宽度等于移动设备的屏幕宽度,只要在 css 中把某一元素的宽度设为 ideal viewport 的宽度(单位用 px),那么这个元素的宽度就是设备屏幕的宽度了

css 中的 1px 并不等于设备的 1px

  css 中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css 中的 1px 所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中可以忽略这个问题,但在移动设备上必须弄明白这点。

利用 meta 标签对 viewport 进行控制

移动设备默认的 viewport 是 layout viewport,,但在进行移动设备网站的开发时,我们需要的是 ideal viewport,最常见的的一个动作就是把下面这个东西复制到我们的 head 标签中

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
// 让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。
// 如果不这样的设定的话,默认会使用那个比屏幕宽的默认viewport,即出现横向滚动条。
content 中的属性 content 中的值
width 设置 layout viewport 的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes 代表允许

缩放是相对于 ideal viewport 来进行缩放的。

visual viewport 宽度 = ideal viewport 宽度 / 当前缩放值

当前缩放值 = ideal viewport 宽度 / visual viewport 宽度

  如果 width 和 initial-scale=1 同时出现,并且还出现了冲突,浏览器会取它们两个中较大的那个值。

  为什么两个都要写?因为只写一个的话,iphone、ipad 以及 IE 会横竖屏不分,通通以竖屏的 ideal viewport 宽度为准,两者都写上去就 initial-scale=1 解决了 iphone、ipad 的毛病,width=device-width 则解决了 IE 的毛病。

在 iphone 和 ipad 上,无论你给 viewport 设的宽的是多少,如果没有指定默认的缩放值,则 iphone 和 ipad 会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说 viewport 的宽度就是屏幕的宽度)的目的。

动态改变 meta viewport 标签

方法一:

使用document.write来动态输出meta viewport标签
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

方法二

<meta id="testViewport" name="viewport" content="width = 380">
<script>
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');
</script>

方法三

      (function (doc, win) {
        var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize', // 监听是否是有屏幕翻转的动作
          recalc = function () {
            var clientWidth = docEl.clientWidth > 1024 ? 1024 : docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = clientWidth / 3.75 + 'px';
          };
        win.addEventListener(resizeEvt, recalc, false);
        recalc();
      })(document, window);
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    243 引用 • 1345 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    100 引用 • 294 回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...