javascript - 获取真实设备的屏幕尺寸

标签 javascript jquery responsive-design

我在获取真实设备的屏幕尺寸时遇到了问题。查看jsfiddle:http://jsfiddle.net/glenswift/CpBkU/

调整输出框架的大小会导致 h1 文本发生变化。我知道 h1 不同部分的像素大小,所以它在桌面上可以正常工作。但是在具有大 dpi 和小屏幕的设备上,我的解决方案不起作用,文本超出屏幕。

我不知道如何解决这个问题。我见过类似的问题( 12 ),但它们对我没有帮助。

我的代码:

function setPositions(){
    var W = $(window).width(),
        h1 = '';
    if (W < 210) {
        h1 = 'Hello';
    } else if (W < 270) {
        h1 = 'Hello World';
    } else {
        h1 = 'Hello World Text'
    }
    $('h1').empty().text(h1);
}
$(document).ready(function(){
    setPositions();
});
$(window).resize(function(){
    setPositions();
});

非常感谢。

最佳答案

关于媒体查询的另一件事 http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

真是一篇打开了我思路的好文章:)

尽情享受吧!

关于javascript - 获取真实设备的屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15594531/

相关文章:

css - 寻找支持最大宽度 968px 的轻量级响应式 CSS 框架

html - 调整大小时如何自动将框移动到底部?

javascript - 无法使用@googlemaps/js-api-loader 生成 Nuxt 网站

javascript - HTML5 Canvas 游戏中的多个 setInterval

javascript - Kendo 窗口 - 第二次单击按钮时窗口不会打开

javascript - 在 jQuery 中将选择器作为函数参数传递

jquery - 如何将网页内容保持在用户 View 下方?

javascript - 使动态生成的列表项成为设置的父高度的 % 高度

javascript - Momentjs future 一个月可节省开支

javascript - 在焦点上动画绘制 SVG 形状的最简洁方法是什么?