iOS   发布时间:2022-03-31  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ios Safari上的SVG视窗高度问题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
使用svg时,我注意到ios有一个奇怪的事情. svgs似乎在所有其他浏览器中都可以正常运行,但是在Safari ipad / iphone上,视窗在svg的顶部和底部有一些奇怪的空间.有没有人遇到过这个,你能解决它吗?使用一些简单的svg代码,如:
<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>

在ipad / iphone上,如果我在svg上放置一个边框上方和下方的奇怪的空间svg …?

小心善良在桌面上看起来很正常,但是如果您在ipad等上看到它,您将看到问题.

http://jsfiddle.net/InVAMPED/hck5gg1a/

解决方法

问题是您只设置宽度,而不是SVG布局框的高度. viewBox然后使用认的xMidYMid会合设置适合此布局框,该设置可以缩放它,以适应更受约束的维度,并将其置于另一个方向.

Firefox和最新版本的Chrome(以及我猜测桌面Safari)会缩小SVG,以使您将一个维度保留为auto时的ViewBox宽高比.但是,其他浏览器将应用认高度/宽度,然后缩放图像以适合:

> IE应用150px height / 300px宽度,这是嵌入对象的认值.
> Safari手机必须使用旧的webkit认值为100vh(浏览器窗口的高度).

这在浏览器中并不是真正的“错误”,只是在规范中从未明确定义过的功能.

搜索关于“padding bottom aspect ratio hack”的信息,以便强制浏览器尊重宽高比,同时仍然允许宽度响应.

大佬总结

以上是大佬教程为你收集整理的ios Safari上的SVG视窗高度问题全部内容,希望文章能够帮你解决ios Safari上的SVG视窗高度问题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: