javascript - 适合每个屏幕分辨率的网页

Question

我使用此代码自动检测用户屏幕分辨率并重定向到另一个页面

<script>
if (screen.width==1367 && screen.height==768)
{
window.location="http://www.yoursite.com"
}
</script>

但是对于每个屏幕分辨率，我都无法编辑网站。是否有可能我只制作可以自动适应屏幕的单页。先感谢您。

Answer 1

'defau1t' 是写的。您也可以通过 css like=> "width:100%"; 设置它 您也可以查看http://www.w3schools.com/js/js_window.asp。一切都取决于您的要求。

Answer 2

您可以使用媒体查询并为不同的屏幕指定不同的样式表。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

例如

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

有关已建立网站的示例，请参见： http: //mediaqueri.es/

Answer 3

您可以使用 CSS3 媒体查询而不是 javascript 来检测设备并相应地加载页面。

@media only screen and (max-width: 999px) {
  /* rules that only apply for canvases narrower than 1000px */
}

@media only screen and (device-width: 768px) and (orientation: landscape) {
  /* rules for iPad in landscape orientation */
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* iPhone, Android rules here */
}

您还需要添加元端口视图标签，如下所示：

<meta name="viewport" content="initial-scale=1.0">