推荐设备MORE

微信调查问卷微信小程序如何

微信调查问卷微信小程序如何

行业新闻

HTML5实践活动 :非回应式设计方案中应用ViewPor

日期:2021-03-25
我要分享

HTML5实践活动 :非回应式设计方案中应用ViewPort meta标识


短视頻,自新闻媒体,达人种草1站服务

大伙儿都了解viewport标识针对回应式设计方案的实际意义,可是你们将会不清晰,他针对非回应式设计方案也是有非常的功效。假如你的站点還是非回应式的,那末根据本文你将学会,怎样应用viewport标识提高你站点在mobile机器设备上的显示信息实际效果。

Viewport标识的1般应用

Viewport meta标识1般用在回应式设计方案中,用来设计方案mobile机器设备viewport的宽度和initial-scale。

meta name="viewport" content="width=device-width, initial-scale=1.0"

在非回应式设计方案中应用Viewport

大伙儿都了解,iphone默认设置的viewport宽度是980px。可是你的设计方案将会不符这个范畴,有时宽点,有时窄点。下面两个事例将向你展现,在甚么状况下可使用viewport标识来提高在mobile机器设备上非回应式设计方案中的展现实际效果。

事例

在iphone查询 Themify 站点。

 

截屏左侧的照片展现了,站点在沒有应用viewport标识时的实际效果,大家能够看到网页页面抵到了显示屏的边沿。截屏右侧的照片是我加上了viewport标识后的实际效果,我将viewport的宽度设定为1024,这时候的网页页面和手机上显示屏在上下都将维持1定的间距。

此外1个事例

假如你设计方案的太窄,也会出現难题。假定你的设计方案时非回应式的,器皿宽度是700px,这时候的实际效果就像截屏左边的照片,可能在手机上显示屏右边造成1个很大的间隙。

 

大家能够根据简易的加上1个720px宽度的viewport,来修补这个难题。大家沒有对你的设计方案开展更改,可是iphone会做出调剂,来融入你的720px宽度。

meta name="viewport" content="width=1024"

一般的不正确

1个一般的不正确是,人们会为非回应式设计方案设定 initial-scale=1 主要参数。这样网页页面可能以100%的占比展现,不容易开展占比的调剂。这样人们就迫不得已挪动网页页面或实行变小的实际操作,来查询全部网页页面。最不尽人意的状况是,人们把 user-scalable=no 或 maximum-scale=1 融合 initial-scale=11起应用。这会禁用站点的放缩的作用,客户将不能能根据这类方法查询到全部网页页面。因此你1定要记牢,假如你的站点并不是回应式设计方案的,那末就不必这么设定!

meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"