相关疑难解决方法(0)

出于好奇,我一直在使用jQuery来确定浏览器的屏幕大小,我想到屏幕大小可以用来确定访问者是否使用iPhone/iTouch查看网站.

所以我使用以下来测试这个:

$(document).ready(

    function() {

        var screenX = screen.width,
            screenY = screen.height;

        alert("X: " + screenX + " Y: " + screenY);

        if (screenX == 320 && screenY == 396) {
            $('div#wrap').css('background-color','#f00');
        }

        else if (screenY == 320 && screenX == 396) {
            $('div#wrap').css('background-color','#0f0');
        }
    }
);

在通过iPhone查看页面时,我注意到尺寸始终如一(无论方向如何):

x:320,y:396

这与方向无关.我还没有尝试使用onChange事件来检测更改(主要是因为我在jQuery上仍然很新),但我想知道是否有办法通过jQuery或普通的javascript确定iPhone/iTouch的取向？

我有这个代码:

@media screen and (max-width: 570px) {

    #header {
        .flex-wrap(wrap);
        .justify-content(center);

        #headerTitles {
            margin-top: 1rem;
        }

    }
}

@media screen and (min-width: 571px) and (max-width: 950px) {

    #header.authenticated {
        .flex-wrap(wrap);
        .justify-content(center);

        #headerTitles {
            margin-top: 2rem;
        }
    }

}

有没有办法,我可以使用Javascript(而不是jQuery)动态添加或删除一个类来表示两个不同的大小,然后重新编码这样的东西:

.small #headerTitles { margin-top: 1rem; }
.large #headerTitles { margin-top: 2rem; }

如果这有效,那么有人可以评论是否使用Javascript是一种更好的方法吗？

我在Google Chrome 测试版的新标签中看到了此代码,如果安装了标签,则会显示图标.

他们正在使用任何技术来调整图像大小.

这是一个图标的html

<div class="app-img-container launch-click-target" title="Box Office" style="height: 97.56981132075472px; width: 97.56981132075472px; ">
    <img class="" src="chrome://extension-icon/dhbbohlkjglcppclgngklojecglglinl/128/0">
  </div>

它是相关课程的CSS

.app-img-container {
margin-left: auto;
margin-right: auto;
-webkit-mask-size: 100% 100%;
}

.app-img-container > * {
height: 100%;
width: 100%;
}

谁能告诉我他们使用的是哪种方法？它是基于Javascript吗？

要检查此项,您可以安装Google Chrome测试版并从Chrome商店安装一些应用,然后在Chrome中打开一个新标签.你会看到图标.

注意:它仅适用于Beta版本

这是我从视图源 http://jsbin.com/ikituc/edit#html中获取的Tab页面的完整来源

这是我从Chrome开发者工具HTML标签 http://jsbin.com/ekiqaf/edit#html 复制的数百个来源

我想知道用于重新调整图标大小的方法.