javascript - 获取要在 CSS 中使用的屏幕尺寸

标签 javascript html css

<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/

相关文章:

javascript - 使用 d3.js 在一个图中用一条线堆积柱形图

javascript - 始终将插入符号位置设置为以 contenteditable div 结尾

html - 部分元素因溢出而收缩 :auto?

html - 如何使用CSS定位 ionic 按钮

javascript - 在 Angular JS 中更改文本的正确方法是什么?

javascript - 使用 Javascript 从 url 获取空哈希值

javascript - 如何防止div元素滚动?

jquery - 在 html 中打印 Jquery 字符串值

javascript - 在 Safari 中设置动画延迟会覆盖动画属性,但在 Chrome 中不会

javascript - javascript 在使用它的 Prop /方法时是否需要引用对象?