这对于HTML/CSS/javascript中的独立于设备的窗口拆分是否可靠？
这里提供的代码在chrome、safari和android浏览器中运行良好。 我认为它在所有现代浏览器中可能都不是完全不变的。 我要求仔细检查，使其在大多数浏览器中完全可靠 我的最终目标是把它变成一个基础。 一次一个字符的聊天应用程序，当前用户始终是底部窗口 顶部的窗口是与您聊天的人 我用了两首莎士比亚十四行诗作为内容来说明 首次加载窗口并调整其大小时窗口的行为 都非常小和全宽这对于HTML/CSS/javascript中的独立于设备的窗口拆分是否可靠？,javascript,html,css,resize,window,Javascript,Html,Css,Resize,Window,这里提供的代码在chrome、safari和android浏览器中运行良好。 我认为它在所有现代浏览器中可能都不是完全不变的。 我要求仔细检查，使其在大多数浏览器中完全可靠 我的最终目标是把它变成一个基础。 一次一个字符的聊天应用程序，当前用户始终是底部窗口 顶部的窗口是与您聊天的人 我用了两首莎士比亚十四行诗作为内容来说明 首次加载窗口并调整其大小时窗口的行为 都非常小和全宽 <!DOCTYPE html> <html lang="en-US"> <head>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="even window split" />
<meta name="description" content="even window split and scrolling content" />
<title>even window split and scrolling content</title>
<style>
div { border-collapse:collapse; }
body { background-color:saddlebrown; }
</style>
<script type="text/javascript">
function hDoc(f) { return f.toString().replace(/.*\/\*([^\*]*).\/.*/, '$1'); }
labelA = hDoc(function() {/* Shakespeare sonnet CXVI: */});
verseA = hDoc(function() {/* <pre>
Let me not to the marriage of true minds
Admit impediments. Love is not love
Which alters when it alteration finds,
Or bends with the remover to remove:
O, no! it is an ever-fixed mark,
That looks on tempests and is never shaken;
It is the star to every wandering bark,
Whose worth's unknown, although his height be taken.
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;
Love alters not with his brief hours and weeks,
But bears it out even to the edge of doom.
If this be error and upon me proved,
I never writ, nor no man ever loved.
</pre> */});
labelB = hDoc(function() {/* Shakespeare sonnet CX: */});
verseB = hDoc(function() {/* <pre>
Alas! 'tis true, I have gone here and there,
And made my self a motley to the view,
Gored mine own thoughts, sold cheap what is most dear,
Made old offences of affections new;
Most true it is, that I have looked on truth
Askance and strangely; but, by all above,
These blenches gave my heart another youth,
And worse essays proved thee my best of love.
Now all is done, have what shall have no end:
Mine appetite I never more will grind
On newer proof, to try an older friend,
A god in love, to whom I am confined.
Then give me welcome, next my heaven the best,
Even to thy pure and most most loving breast.
</pre> */});
function resize() {
var w = window.innerWidth , h = window.innerHeight;
var h2 = Math.round(h/2 - 2) , ht = 8;
var ww = Math.round(w - 2) , hh = Math.round(h2-ht- 2);
var ut = Math.round( ht+ 2) , ub = Math.round(ut+hh );
var lt = Math.round(ub+ht+ 2) , lb = h;
var black = '000' , white = 'FFF';
style0 = 'div { overflow-y: scroll; margin-bottom: 1px; }\n';
styleA = '#verseA{';
styleA += 'border:' + '1px solid black;';
styleA += 'width:' + ww + 'px;' ;
styleA += 'height:' + hh + 'px;' ;
styleA += 'position:' + 'absolute;' ;
styleA += 'top:' + ut + 'px;' ;
styleA += 'bottom:' + ub + 'px;' ;
styleA += 'left:' + '0px;' ;
styleA += 'right:' + '0px;' ;
styleA += 'background-color:#' + black + ';' ;
styleA += 'color:#' + white + ';' ;
styleA += '}\n';
styleB = '#verseB{';
styleB += 'border:' + '1px solid black;';
styleB += 'width:' + ww + 'px;' ;
styleB += 'height:' + hh + 'px;' ;
styleB += 'position:' + 'absolute;' ;
styleB += 'top:' + lt + 'px;' ;
styleB += 'bottom:' + lb + 'px;' ;
styleB += 'left:' + '0px;' ;
styleB += 'right:' + '0px;' ;
styleB += 'background-color:#' + white + ';' ;
styleB += 'color:#' + black + ';' ;
styleB += '}\n';
shown0 = '<style type="text/css">\n'+ style0 + styleA + styleB +'</style>';
shownA = '\n<div id="verseA"><pre>';
shownA += '\n<div id="headerA"><b id="labelA">' + labelA + '</b></div>\n';
shownA += verseA;
shownA += '\n</pre></div>';
shownB = '\n<div id="verseB"><pre>';
shownB += '\n<div id="headerA"><b id="labelA">' + labelB + '</b></div>\n';
shownB += verseB;
shownB += '\n</pre></div>\n';
document.getElementById("demo").innerHTML = shown0 + shownA + shownB;
}
window.addEventListener("resize", resize);
</script>
</head>
<body onLoad="resize()" onResize="resize()"><div id="demo"></div></body>
</html>
甚至窗口分割和滚动内容
div{边界折叠：折叠；}
正文{背景色：马鞍色；}
函数hDoc（f）{返回f.toString（）.replace（/.\/\*（[^\*]*）。\/.*/，'$1'）；}
labelA=hDoc（function（）{/*莎士比亚十四行诗CXVI://}）；
verseA=hDoc（函数（）{/*
让我不要和真心实意的人结婚
承认障碍。爱不是爱
当它发现改变时就会改变，
或使用拆卸工具进行弯曲以拆卸：
O、 不！这是一个固定的标记，
它注视着暴风雨，永不动摇；
它是每一只流浪树皮的星星，
他的价值不得而知，尽管他的身高可以被测量。
爱情不是时间的傻瓜，尽管嘴唇和脸颊红润
在他弯弯的镰刀的指南针里；
爱不会随着他短暂的时间和星期而改变，
但事实证明了这一点，甚至到了毁灭的边缘。
如果这是一个错误，并且在我身上得到了证明，
我从不写信，也没有人爱我。
*/});
labelB=hDoc（function（）{/*莎士比亚十四行诗CX://}）；
verseB=hDoc（函数（）{/*
唉！这是真的，我到处都去了，
使我自己成为风景的杂色，
刺痛我自己的思想，廉价出售最贵的东西，
使旧的感情犯罪变成新的；
最真实的是，我看到了真理
奇怪地斜视；但是，综上所述，
这些混合物给了我的心另一个青春，
更糟糕的文章证明了我对你最好的爱。
现在一切都完成了，有什么是没有尽头的：
我再也不会磨碎我的胃口了
根据最新的证据，去试试老朋友，
一个被爱的上帝，我被禁锢在他身边。
那就欢迎我，下一个是我的天堂，
甚至是你最纯洁最爱的胸怀。
*/});
函数resize（）{
var w=window.innerWidth，h=window.innerHeight；
var h2=数学四舍五入（h/2-2），ht=8；
var ww=数学圆（w-2），hh=数学圆（h2 ht-2）；
var ut=数学圆整（ht+2），ub=数学圆整（ut+hh）；
var lt=数学圆整（ub+ht+2），lb=h；
变量黑色='000'，白色='FFF'；
style0='div{overflow-y:scroll；边距底部：1px；}\n'；
styleA='#verseA{'；
styleA+='边框：'+'1px纯黑色；'；
styleA+='宽度：'+ww+'px；'；
styleA+='高度：'+hh+'px；'；
styleA+='位置：'+'绝对；'；
styleA+='top:'+ut+'px；'；
styleA+='底部：'+ub+'px；'；
styleA+='左：'+'0px；'；
styleA+='右：'+'0px；'；
styleA+='背景色：#'+黑色+'；
styleA+='颜色：#'+白色+'；
styleA+='}\n'；
styleB='#verseB{'；
styleB+='边框：'+'1px纯黑；'；
styleB+='宽度：'+ww+'px；'；
styleB+='高度：'+hh+'px；'；
styleB+='位置：'+'绝对；'；
styleB+='top:'+lt+'px；'；
styleB+='底部：'+lb+'px；'；
styleB+='左：'+'0px；'；
styleB++='right:'+'0px；'；
styleB+='背景色：#'+白色+'；
styleB+='颜色：#'+黑色+'；
styleB+='}\n'；
shown0='\n'+style0+styleA+styleB+''；
shownA='\n'；
shownA+='\n'+labelA+'\n'；
shownA+=verseA；
shownA+='\n'；
shownB='\n'；
shownB+='\n'+labelB+'\n'；
shownB+=verseB；
shownB+='\n\n'；
document.getElementById（“demo”）.innerHTML=shown0+shownA+shownB；
}
addEventListener（“调整大小”，调整大小）；