<style>
<script>
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
screenW = screen.width;
screenH = screen.height;
}
else if (navigator.appName == "Netscape"
&& parseInt(navigator.appVersion)==3
&& navigator.javaEnabled()
)
{
var jToolkit = java.awt.Toolkit.getDefaultToolkit();
var jScreenSize = jToolkit.getScreenSize();
screenW = jScreenSize.width;
screenH = jScreenSize.height;
}
document.write(
".wrap, html {font-family: 'PT Sans', sans-serif; width:"+screenW+"px;height:"+screenH+"px;}"
)
</script>
</style>
此脚本旨在将用户的屏幕尺寸添加到这个简短的 CSS 片段的高度和宽度参数中,这是我在内部包含的,缺少使用外部样式表执行此操作的方法。
我很乐意学习一种更有效的新方法来完成这项工作。然而,我的正式问题是这个脚本会起作用吗?
http://www.javascripter.net/faq/screensi.htm是我从中抓取的页面位置!
最佳答案
我使用 XHTML 完成了这项工作(如果它在 XHTML 中工作,它在 HTML 中工作,但 99.9% 的时间不是相反)所以你知道你在这里得到了一个高质量的例子。
首先,您不要让脚本元素成为样式元素的子元素。
其次,永远不要将脚本元素放在 body 元素中,除非你想在以后的工作中造成严重的损害。
切勿使用 document.write
因为它不兼容 XHTML 或 innerHTML
因为它将代码视为文本字符串而不是代码,这意味着当您尝试更改转储到DOM 它可能会或可能不会工作,因为您可能指的是代码,或者您可能指的是看起来像代码的文本。
将以下内容保存为 example.xhtml
然后在 Firefox 中打开。我建议使用 Firebug 的检查器来查看 DOM,这样您就可以在最后确认引用具有 screen_height 和 screen_width 的样式表的链接元素。随时问我任何(理智的)问题。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="application/javascript">
//<![CDATA[
function load_css()
{
var l = document.createElement('link');
l.setAttribute('href','themes/example/style.css?screen_height='+encodeURIComponent(screen.height)+'&screen_width='+encodeURIComponent(screen.width));
l.setAttribute('rel','stylesheet');
l.setAttribute('title','example');
l.setAttribute('type','text/css');
document.getElementsByTagName('head')[0].appendChild(l);
}
window.onload = function()
{
load_css();
}
//]]>
</script>
</head>
关于javascript - 获取要在 CSS 中使用的屏幕尺寸,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18820185/