viewport的相关知识点
主要说一些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
当设置了width
和initial-scale
时,浏览器会自动选择数值最大的进行适配。
如设置:
<meta name="viewport" content="width=400, initial-scale=1">
浏览器会选择数值大的进行适配,如果当前窗口ideal viewport宽度为300,initial-scale
值为1,取得是width为400的值;如果当前窗口的ideal viewport为480,则取480。
事实上,width=device-width
和initial-scale=1
都代表应用ideal viewport
,但在ipad、iphone等移动设备和IE上,横竖屏不分,默认都取竖屏的宽度,兼容性最好的写法就是<meta name="viewport" content="width=device-width, initial-scale=1">
总结:在iphone和ipad上,无论你给viewport设的宽的是多少,如果没有指定默认的缩放值,则iphone和ipad会自动计算这个缩放值,以达到当前页面不会出现横向滚动条(或者说viewport的宽度就是屏幕的宽度)的目的。
希望有所帮助。
viewport的相关知识点的更多相关文章
- UITableView相关知识点
//*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...
- Android开发涉及有点概念&相关知识点(待写)
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
- IOS开发涉及有点概念&相关知识点
前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...
- IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结
添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...
- 学习记录013-NFS相关知识点
一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...
- TCP/IP 相关知识点与面试题集
第一部分:TCP/IP相关知识点 对TCP/IP的整体认 链路层知识点 IP层知识点 运输层知识点 应用层知识点 (这些知识点都可以参考:http://www.cnblogs.com/newwy/p/ ...
- Python开发一个csv比较功能相关知识点汇总及demo
Python 2.7 csv.reader(csvfile, dialect='excel', **fmtparams)的一个坑:csvfile被csv.reader生成的iterator,在遍历每二 ...
- Caffe学习系列(二)Caffe代码结构梳理,及相关知识点归纳
前言: 通过检索论文.书籍.博客,继续学习Caffe,千里之行始于足下,继续努力.将自己学到的一些东西记录下来,方便日后的整理. 正文: 1.代码结构梳理 在终端下运行如下命令,可以查看caffe代码 ...
- php正则相关知识点
关于正则,其实简单就是搜索和匹配.php,java,python等都是支持正则的,php正则兼容perl.好多同学觉得正则比较难,比较抽象,其实正则是非常简单的,主要是一个熟悉和反复练习的结果,还有一 ...
随机推荐
- Kafka的知识总结
前言 转自(https://www.cnblogs.com/zhuifeng523/p/12081204.html) Kafka是最初由Linkedin公司开发,是一个分布式.支持分区的(partit ...
- IDEA项目目录里下找不到src,但是src确实存在的的解决方案
写代码的时候可能出现写着写着src就找不到了,我个人认为是触发了热键导致src被隐藏了,下面就是设置src可见和不可见的操作 这个其实是被隐藏了,打开就好,位置如下:
- C++练习 | 基于栈的中缀算术表达式求值(double类型
#include<iostream> #include<stack> #include<cmath> using namespace std; char ch; b ...
- Redis学习笔记(一)Windows下redis的安装和启动
在Windows上安装redis 下载地址:https://github.com/microsoftarchive/redis/releases 选择图中红框标出来的下载,解压到磁盘上,文件夹命名为r ...
- python+minicap的使用
说起Minicap,不得不提到STF,STF (Smartphone Test Farm) 是一个开源的web架构应用,用户可通过浏览器远程操作Android设备.调试Android应用.在设备上进行 ...
- python发起post请求获取json数据使用requests方法
最普通的答案 我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就是这么理解的 . 可能很多人都已经猜到了答案是: 1.GET 使用URL或Cookie传参.而POS ...
- java web实现同一账号在不同浏览器不能同时登录
网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听 一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...
- 免费使用Google
这里需要借助一下`梯子`,这里有教程 点击进入 如果没有谷歌浏览器,进入下载最新版谷歌浏览器,进入下载,不要移动它的安装位置,选择默认位置, 如果已经安装了谷歌浏览器,打开赛风之后,选择设置 进行安装 ...
- 织梦DEDEcms5.7解决arclist标签调用副栏目文章
使用arclist标签调用文章的时候才发现,根本无法调用相关文章. 下面给出解决办法,希望帮到需要的人. 找到/include/taglib/arclist.lib.php文件然后打开.然后在大约30 ...
- xml_dom解析
DOM解析(一) 采用dom解析,会将xml文档全部载入到内存当中,然后将xml文档中的所有内容转换为tree上的节点(对象). 优点: 可以随机解析 可以修改文件 可以创建xml文件 缺点: 适合解 ...