我使用Andy Langton javascript来获取我的viewport大小。如果你没听说过,请看下面的链接。
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/脚本工作,但我不确定如何最好的方式来让脚本输出'宽度'和'高度'到我的身体CSS,或任何其他CSS选择器的事。
参见下面我蹩脚的尝试,尽管我认为我在jQuery中混合是错误的
<script>
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
$(document).ready(function() {
$("body").css({
width : "+viewportwidth+",
height : "+viewportheight+"
});
});
//-->
</script>
谁能帮我解决这个难题?如果有办法通过PHP标签将它添加到body html中,那也会很酷,看看下面我的例子…
<div style="width: <?php veiwportwidth(); ?>px; height: <?php veiwportheight(); ?>px;"> </div>
如果这是有意义的,不用担心,只是javascript位将是非常有帮助的。
你接近你的jQuery:
$( 'body' ).css( {
'width' : viewportwidth + 'px',
'height' : viewportheight + 'px'
} );
您还可以向DOM添加样式部分,这有助于类重用(但在本例中没有那么多):
演示:http://jsfiddle.net/ThinkingStiff/Pa9k3/
脚本:
var bodyStyle =
'body'
+ '{'
+ 'width: ' + viewportwidth + 'px;'
+ 'height: ' + viewportheight + 'px;'
+ '}';
$( '<style />' ).append(
document.createTextNode( bodyStyle )
).appendTo( 'head' );
需要修改的是:
$("body").css({
width : "+viewportwidth+",
height : "+viewportheight+"
});
:
$("body").css({
"width" : viewportwidth + "px",
"height" : viewportheight + "px"
});