澳门百老汇游戏 服务器常用软件

澳门百老汇游戏报道viewport 的基本原理以及详细使用方法_澳门百老汇游戏官网资讯

  公布时间:2019-10-05 13:50:27   作者:King   我要议论
这篇文章主要介绍了viewport 的基本原理以及详细使用方法,需要的朋友能够参考下

一.viewport的概要

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

常规使用,页面能够缩放就用下面的代码

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

如果不想页面缩放就用下面的代码

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

二.css中的像素和设施像素的区别

在桌面网页开拓时,css中的1px就是设施上的1px;然而css中的1px仅仅是一个抽象的值,不代替实际像素为几多;而在移动设施中,差别设施的像素密度是纷歧样的,css中的1px可能并不等于真实设施的一个像素值。用户缩放也会改变css中的1px代替几多设施像素。这个比例就是devicePixelRatio

物理像素/独立像素 = devicePixelRatio
我们能够在扫瞄器中进行缩放,在操纵台中打印window.devicePixelRatio来察看devicePixelRatio的大小。其中的独立像素能够了解为css中的px。

三.视口基础

代码:

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

以下为viewport的几个属性,这些属性能够混合来使用,多个属性同时使用要用逗号隔开。这里我们展开一个概念,叫做ideal viewport,指的是理想情况下的viewport,不需要用户缩放和横向滚动条就能正常察看网页的一切内容,并且能够看清一切文字,无论这个文字在css中定义为多小,显示出来时能够看清的。

属性 描述
width 操纵视口的宽度,能够指定数字;或设置device-width来指定
height 操纵视口的高度,这个属性不太重要,很少使用
initial-scale 操纵页面最初加载时的在在idealviewport下缩放等级,通常设为1,能够是小数
maximum-scale 同意用户的最大缩放值,为一个数字,能够带小数
minimum-scale 同意用户的最小缩放值,为一个数字,能够带小数
user-scalable 是否同意用户进行缩放,值为”no”或”yes”, no 代替差别意,yes代替同意

四.viewport进阶

1.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">

2.动态改变属性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

viewport概念

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

css中的像素和设施像素的区别

在桌面网页开拓时,css中的1px就是设施上的1px;然而css中的1px仅仅是一个抽象的值,不代替实际像素为几多;而在移动设施中,差别设施的像素密度是纷歧样的,css中的1px可能并不等于真实设施的一个像素值。用户缩放也会改变css中的1px代替几多设施像素。这个比例就是devicePixelRatio

物理像素/独立像素 = devicePixelRatio

我们能够在扫瞄器中进行缩放,在操纵台中打印window.devicePixelRatio来察看devicePixelRatio的大小。其中的独立像素能够了解为css中的px。

视口基础
一个典范的针对移动端优化的站点包含类似下面的内容:

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

以下为viewport的几个属性,这些属性能够混合来使用,多个属性同时使用要用逗号隔开。这里我们展开一个概念,叫做ideal viewport,指的是理想情况下的viewport,不需要用户缩放和横向滚动条就能正常察看网页的一切内容,并且能够看清一切文字,无论这个文字在css中定义为多小,显示出来时能够看清的。

属性 描述
width 操纵视口的宽度,能够指定数字;或设置device-width来指定
height 操纵视口的高度,这个属性不太重要,很少使用
initial-scale 操纵页面最初加载时的在在idealviewport下缩放等级,通常设为1,能够是小数
maximum-scale 同意用户的最大缩放值,为一个数字,能够带小数
minimum-scale 同意用户的最小缩放值,为一个数字,能够带小数
user-scalable 是否同意用户进行缩放,值为”no”或”yes”, no 代替差别意,yes代替同意

viewport进阶

1.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">

2.动态改变属性

a. document.write()

document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')

b.setAttribute

var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');

好了,这篇文章就介绍到这了大家能够依据自己测需要要选择。一般来说pc与移动不带自适应的就能够用不撑腰缩放的,如果跳转到移动端的能够缩放也没有影响。

相关文章

最新议论

微信 99炮捕鱼游戏中心 交流社区 在线工具
条评论