如何根据用户的Web浏览器屏幕分辨率自动调整网页大小？ [英] How to resize the web page automatically based on user's web browser screen resolution?

问题描述

请建议我的解决方案。提前谢谢。

Please suggest me the solution . thanks in advance.

推荐答案

< script type =text / javascript>

函数TableHeight（）

{

if（typeof（window.innerWidth）=='number'）

{

//非IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

}

，否则如果（document.documentElement中&&（document.documentElement.clientWidth || document.documentElement.clientHeight））

{

/ / IE 6+在 '标准兼容模式'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

}

else if（document.body &&（document.body.clientWidth || document.body.clientHeight））

{

// IE 4兼容

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

document.getElementById（'ctl00_TopPanel'）。style.height =（myHeight - 140）+'px';

}

< / script>



上面用于解决问题的代码

用我的表单代替ctl00_TopPanel'。

<script type="text/javascript">
function TableHeight()
{
if (typeof (window.innerWidth) == 'number')
{
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
}
else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
{
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
}
else if (document.body && (document.body.clientWidth || document.body.clientHeight))
{
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
document.getElementById('ctl00_TopPanel').style.height = (myHeight - 140) + 'px';
}
</script>

Used above code for solving problem
Used id of my form in place of ctl00_TopPanel'.

您可以将Parent Div的宽度设置为100％，以适应不同的分辨率。



其他选项可以使用媒体查询。



multiple- media-queries-for-different-screens-sized [ ^ ]



http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ [ ^ ]



http://htmldog.com/guides/css/advanced/mediaqueries/ [< a href =http://htmldog.com/guides/css/advanced/mediaqueries/target =_ blanktitle =New Window> ^ ]

You can set the Parent Div's width to 100 % so it will fit to different resolutions.

Other option can be using Media Queries.

multiple-media-queries-for-different-screen-sizes[^]

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/[^]

http://htmldog.com/guides/css/advanced/mediaqueries/[^]

Just use percentage based layouts rather than pixels or other measurements.
<img width="50%">: that will fill half of the screen, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.


It is also theoretically possible to design a website using pixels and adjust it using Javascript to scale, but that is the same as using percentages (in how it looks) and MUCH harder to do. It also is unreliable. Basically, a good web designer won't need to do that.

这篇关于如何根据用户的Web浏览器屏幕分辨率自动调整网页大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！