其他分享
首页 > 其他分享> > 关于浏览器的双指缩放

关于浏览器的双指缩放

作者:互联网

今天在测试前两天做的全屏展示图片功能的时候,突然发现,当我进入全屏展示图片时,双指放大图片之后取消全屏展示之后,整个页面都会放大。这一点都不用户友好!所以我去搜了搜浏览器原生双指放大相关的资料,在浏览不少网页后,终于找到了解决方案。

在讨论解决方案前,先说明一下 name 为 viewport 的 meta 标签吧,这个标签通常是用来对页面进行缩放适配,其有以下几个属性

width:用于控制视口的宽度(可以理解为 html 标签父元素的宽度),可以设置为数值或 device-width。通常设置为 device-width,指代缩放为 100% 时以 CSS 像素计量的屏幕宽度。

height:类似于 width

initial-scale:用于控制页面初始加载时的缩放等级,通常设为 1

maximum-scale:控制最大缩放等级

minimum-scale:控制最小缩放等级

user-scalable:控制用户是否可以缩放页面,值为 yes 或 no,默认设置为 yes

以上资料来源于MDN

不少解决方案均是设置所有缩放等级为 1 并禁止缩放,于是我便想,在缩放后设置最大缩放等级为 1 会怎么样呢,便去代码中测试,当关闭全屏展示图片时,设置最大缩放等级为 1。

开启浏览器测试,放大图片后关闭,页面缩放到等级 1,完美。不过这样设置后,第二次全屏展示图片时,便无法缩放图片了,于是便需要在进入全屏展示图片时,取消最大缩放等级。

这时,便完成了在关闭全屏展示图片后页面自动缩放到等级 1 的功能,并在再次打开全屏展示图片后取消缩放限制。不过,如果用户在加载页面后不打开全屏展示图片呢?这种情况下用户还行可以随意放大页面,为了防止用户误操作,便需要在 该标签中设置最大缩放等级为 1,令页面在刚加载完时便不可缩放到等级 1 以上。

标签:双指,浏览器,缩放,展示,全屏,图片,等级,页面
来源: https://www.cnblogs.com/FreezeNow/p/12169095.html