如何调整页面大小？

Question

我正在设计一个网站，我有屏幕分辨率问题。我想扩展我的页面，但我不能这样做。

我的网站和21.5 inc mac屏幕:(已完成，没问题）

我的笔记本电脑屏幕1366 x 768像素分辨率;

我在css上试过这个;

body, html {height:100%;}

和html上的这个;

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

Doctype是：XHTML 1.0 Transitional

但不起作用。我该怎么办？

谢谢！

Answer 1

基本上，你不能以一种简单，容易的方式。

视口标记以及仅适用于移动设备（当前）的所有内容，因为它们以与桌面浏览器不同的方式加载整个页面并平移它。

大多数网站都设计为垂直滚动，所以CSS非常适合水平拉伸，但垂直做同样的事情非常糟糕。

一种方法是设计各种不同的版本，然后使用媒体查询来更改不同高度的属性。

在CSS中，这看起来像：

#box {
    width:100px;
    height:100px;
    background-color:red;
}

@media all and (max-height: 400px) and (min-height: 200px) {
    #box {
        background-color:green;
    }
}

除非屏幕高度在200px到400px之间，否则会生成一个红色的框。当屏幕尺寸不同时，您可以使用该技术执行不同的操作。这几天得到了很好的支持。 （http://caniuse.com/#feat=css-mediaqueries - 基本上无处不在，但IE8及其下方。）

另一种方法是使用视口单元（vh而不是px或em），其中1vh =浏览器高度的1％。这是非常糟糕的支持（http://caniuse.com/#feat=viewport-units - 没有firefox，没有Opera，IE9及以上版本。）

除此之外，您正在考虑使用javascript调整圆形菜单的高度以使其缩放。如果你还没有搞过JS，那就是jQuery。

简而言之，为了让事情变得简单：

• 设计垂直滚动的网站
• 设计无法小心滚动的网站，并为600px，768px，720px和1080px高屏幕定义不同的行为（记住在这里减去浏览器镶边的高度，我猜你可以估计在100-300px之间）

Answer 2

您正在设置html和body的高度为100％但是身体内部元素的高度和宽度如何？为了使它们具有流动性并适合所有屏幕尺寸，您必须给出高度和宽度以及几乎每个元素的填充和边距百分比。

Answer 3

您是否尝试使用元标记视口？

 <meta name="viewport" content="width=320">