Question

我的div（#box）位于浏览器窗口的中间位置，对于600px垂直或更高的浏览器来说，它是常规的。如果窗口小于该值，则div顶部的内容会被剪掉，滚动条仅向上滚动页面（当我向下拉动滚动条时），因此无法看到隐藏在顶部边缘上方的任何内容。即使滚动条位于其最顶部位置，窗口也是如此。

以下是我将div放在中心的方法 - 你可以看到为什么div的顶部会在较小的浏览器窗口中被切断。

{position: absolute; top: 50%; left: 50%; width: 1930px; height: 607px; margin-left: -965px; margin-top: -302px;}

（即使在最宽的屏幕上也可以容纳动画 - 宽度不是问题。）

这是一个要查看的页面：http://ianmartinphotography.com/test-site/
我的CSS：http://ianmartinphotography.com/test-site/css/basic.css

这很容易在我的CSS样式表中修复，但似乎我不能同时使用大于600px的监视器和小于600px的监视器。

那么，如何检测浏览器窗口大小然后选择两种不同的CSS样式表之一？一个用于小窗口，另一个用于较大的窗口？是否有一个jquery脚本可以为我做这个？

或者，是否有另一种方法可以使用CSS 在浏览器窗口中间设置div中心，以便滚动，以便在较小的浏览器窗口上访问div的顶部？ / p>

感谢您的想法！

Answer 1

@media查询是我的偏好（看到你不喜欢它们作为解决方案本身），但他们真的可以做到这一点 - 特别是如果你调整你的css以适应。

<link...media="only screen and (max-height: 600px)" href="small-device.css" />
    small-device.css = div.container { ... height:500px; margin:50%; ...}

<link...media="only screen and (min-height: 601px)" href="big-device.css" />
    big-device.css = div.container {... height:600px; margin:50%; ...}

通过消除绝对定位并利用正常的文档流程，您可能还会有更多的运气。它可以帮助您添加{ overflow-y:scroll; }之类的内容那些隐藏在屏幕上的高度div。

我想最后，如果您尝试围绕手持设备进行设计，您将需要在某种程度上进行媒体查询。我的Android屏幕（例如）有3个显示选项（低，中，高def）。所有3个裁剪页面都不同。

Answer 2

您可以通过Jquery确定窗口大小

$(window).width();
$(window).height();

或

$(document).width();
$(document).height();

然后改变css

$("link").attr("href", "blue.css");

这样的事情：

$(document).ready(function(){

 if($(document).height()  > 600 or $(window).height() > 600){

   $("link").attr("href", "600+.css");

 } else {

   $("link").attr("href", "600-.css");

 }
});

Answer 3

适用于所有主流浏览器的解决方案。不需要JS。当内容大于视口时，垂直/水平居中，可滚动，粘到顶部。

HTML：

<div id="body">[your content goes here]</div>

CSS：

html, body {
    width: 100%;
    height: 100%;
    }

html {
    display: table;
}

body {
    display: table-cell;
    vertical-align: middle;
}

#body {
    margin: 0 auto;
}

不要忘记应用最后一条规则，它实际上会执行水平居中。

Answer 4

使用以下JavaScript条件检测屏幕大小。

function x()将处理<head>标记中的CSS链接。您需要做的就是调用该函数并传入CSS文件名。

< script type = "text/javascript" >
<!--
function x(y) {
    var styles = y;
    var newSS = document.createElement('link');
    newSS.rel = 'stylesheet';
    newSS.href = 'data:text/css,' + styles;
    document.getElementsByTagName("head")[0].appendChild(newSS);
}

if ((screen.width >= 1024) && (screen.height >= 768)) {
    x('file.css');
}
else {
    x('file1.css');
}
//-->
< /SCRIPT>

Answer 5

只是做了一些谷歌搜索，发现了这个：

http://www.ilovecolors.com.ar/detect-screen-size-css-style/

这对你有用吗？

Answer 6

尝试Less CSS Framework：http://lessframework.com/，

您不需要JavaScript，而是可以使用CSS @Media根据分辨率/屏幕尺寸设置样式。

祝你好运

Answer 7

如果“document_height”不起作用，请尝试“window_height”我在代码中对其进行评论！

$("link").attr("href", "css_file_path"); //这里必须插入你的css路径，在下面的代码中替换它

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" ></script>

<script type="text/javascript">

$(document).ready(function(){

document_height = $(document).height();
//window_height = $(window).height();

//if(window_height  > 600){
 if(document_height  > 600){
    alert('Bigger than 600px height: ' + $(document).height());
   $("link").attr("href", "600+.css"); // Here load css if window is bigger then 600px;

 } else {
    alert('Smaller than 600px height: ' + $(document).height());
   $("link").attr("href", "600-.css"); // Here load css if window is smaller then 600px;

 }
});

</script>

为不同的浏览器窗口大小选择不同的CSS样式表？

7 个答案: