html - 使用 CSS3 获取设备物理尺寸

标签 html css media-queries

我有一个使用 CSS3 和 SVG 图形开发的 HTML5 页面。当设备像素比为 1.5 或 2 时,我尝试使用媒体查询来放大 SVG 图形。这很好用。现在我在 Motorolla Xoom 等小型设备上查看我的页面。报告的比率为 1。这意味着与普通显示器相比,Xoom 显示的所有内容都非常小。最烦人的部分是它在横向模式下看起来很棒,但在纵向模式下整个页面会调整大小以适应相同的宽度。此时比率数字没有改变。

我确实尝试过使用类似“width: 3in;”的东西但同样,它只是横向的正确尺寸。

最终,我想使用设备大小与像素大小的某种比率,并以此方式缩放所有内容。这可能吗?

最佳答案

我的问题是,当方向改变时,我的图形再也没有渲染过。当我再次点击刷新时,一切都按预期出现了。这是一个存在于我的键盘和椅子之间的问题。媒体查询实际上是有效的,我只需要在方向改变时重新渲染一些东西。

关于html - 使用 CSS3 获取设备物理尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10218254/

相关文章:

html - 导航栏消失 - Angular 7

css - 在 Wordpress 中的第 3 方插件 css 之后加载自定义 css

css - Rails - CSS 未在 Internet Explorer 中加载

css - 未检测到媒体屏幕?

html - 使用自动固定宽度列时如何让CSS多列布局使用适当的宽度?

jquery - 如何在 html 文本输入框中输入文本时执行 jquery 函数?

javascript - 如何使用Javascript改变伪元素内容?

css - 媒体查询选择不同的 960 gs

android - Gmail 支持媒体查询

javascript - 在保持比例的同时动态缩小图像