主要说一些viewport的基本原理以及使用

㈠概念

手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面,这个虚拟窗口就是viewport,目的是正常展示没有做移动端适配的网页,可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条,这里可显示区域的宽度就是viewport的宽度。

 

㈡利用meta标签对viewport进行控制

我们经常会见到这样一行代码:

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

该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。

 

 以下为viewport的几个属性,这些属性可以混合来使用,多个属性同时使用要用逗号隔开

 

㈢width和initial-scale

当设置了widthinitial-scale时,浏览器会自动选择数值最大的进行适配。

如设置:

 <meta name="viewport" content="width=400, initial-scale=1">

浏览器会选择数值大的进行适配,如果当前窗口ideal viewport宽度为300,initial-scale值为1,取得是width为400的值;如果当前窗口的ideal viewport为480,则取480。

事实上,width=device-widthinitial-scale=1都代表应用ideal viewport,但在ipad、iphone等移动设备和IE上,横竖屏不分,默认都取竖屏的宽度,兼容性最好的写法就是<meta name="viewport" content="width=device-width, initial-scale=1">

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

 

希望有所帮助。

viewport的相关知识点的更多相关文章

  1. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

  2. Android开发涉及有点概念&相关知识点(待写)

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  3. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  4. IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  5. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  6. TCP/IP 相关知识点与面试题集

    第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...

  7. Python开发一个csv比较功能相关知识点汇总及demo

    Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...

  8. Caffe学习系列(二)Caffe代码结构梳理,及相关知识点归纳

    前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...

  9. php正则相关知识点

    关于正则,其实简单就是搜索和匹配.php,java,python等都是支持正则的,php正则兼容perl.好多同学觉得正则比较难,比较抽象,其实正则是非常简单的,主要是一个熟悉和反复练习的结果,还有一 ...

随机推荐

  1. Kafka的知识总结

    前言 转自(https://www.cnblogs.com/zhuifeng523/p/12081204.html) Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partit ...

  2. IDEA项目目录里下找不到src,但是src确实存在的的解决方案

    写代码的时候可能出现写着写着src就找不到了,我个人认为是触发了热键导致src被隐藏了,下面就是设置src可见和不可见的操作 这个其实是被隐藏了,打开就好,位置如下:

  3. C++练习 | 基于栈的中缀算术表达式求值(double类型

    #include<iostream> #include<stack> #include<cmath> using namespace std; char ch; b ...

  4. Redis学习笔记(一)Windows下redis的安装和启动

    在Windows上安装redis 下载地址:https://github.com/microsoftarchive/redis/releases 选择图中红框标出来的下载,解压到磁盘上,文件夹命名为r ...

  5. python+minicap的使用

    说起Minicap,不得不提到STF,STF (Smartphone Test Farm) 是一个开源的web架构应用,用户可通过浏览器远程操作Android设备.调试Android应用.在设备上进行 ...

  6. python发起post请求获取json数据使用requests方法

    最普通的答案 我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就是这么理解的 . 可能很多人都已经猜到了答案是: 1.GET 使用URL或Cookie传参.而POS ...

  7. java web实现同一账号在不同浏览器不能同时登录

    网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听 一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...

  8. 免费使用Google

    这里需要借助一下`梯子`,这里有教程 点击进入 如果没有谷歌浏览器,进入下载最新版谷歌浏览器,进入下载,不要移动它的安装位置,选择默认位置, 如果已经安装了谷歌浏览器,打开赛风之后,选择设置 进行安装 ...

  9. 织梦DEDEcms5.7解决arclist标签调用副栏目文章

    使用arclist标签调用文章的时候才发现,根本无法调用相关文章. 下面给出解决办法,希望帮到需要的人. 找到/include/taglib/arclist.lib.php文件然后打开.然后在大约30 ...

  10. xml_dom解析

    DOM解析(一) 采用dom解析,会将xml文档全部载入到内存当中,然后将xml文档中的所有内容转换为tree上的节点(对象). 优点: 可以随机解析 可以修改文件 可以创建xml文件 缺点: 适合解 ...