如何在moblie浏览器中容纳网页？

Question

我正在尝试使我的网站适合移动浏览器。我正在创建两个通常在设计上相同的站点。对于第一个站点，它将自动适应移动浏览器（100％，高度100％）。但是对于第二个站点，其侧边栏和内容宽度与我给出的相同。

例如：网站1
如果侧边栏和内容的宽度为320px，则当我们在手机中打开屏幕宽度为320px的站点时；边栏的宽度将减小，以完全看到该站点。

例如：站点2 如果侧边栏和内容的宽度为320px，则当我们在手机中打开屏幕宽度为320px的站点时；边栏的宽度仍为320px，全屏只能看到边栏。

网站1是我想要的。我使两个站点具有相同的样式。但是两个站点中的元素（按钮，文本框，表）的样式都不相同。我认为，这是因为这些因素。请告诉我一些事情。
我无法使用百分比，因为我的公司想要精确的像素。不需要响应。只是为了保持站点1图像中的比例，如下所示。
这些图像是在移动浏览器中捕获的。 我也尝试过使用“元标记”。它不起作用。
这是我的简单代码。

{{1}}

Answer 1

您应该考虑使用类似Bootstrap的框架来为您完成繁重的工作。这样可以节省您大量的精力。

tutorials的使用方法很棒。

如果您不愿意手动解决此问题，建议您咨询@media queries

Answer 2

因此，您将要使元素的宽度百分比而不是像素百分比，并且您希望添加一个媒体查询，以在宽度达到320px或任何最佳尺寸时将宽度更改为100％。我建议在构建需要在许多设备上工作的网站时，避免使用像素宽度。

试试这个CSS。您可以根据需要调整高度。

<style>
 .sidebar {
   width: 25%;
   display: block;
   position: fixed;
   top: 0;
   height: 200px;
   bottom: 0;
   left: 0;
   z-index: 1;
   overflow: hidden;
   background-color: #2D51A3; 
 } 

.content {
  position: relative;
  z-index: 4;
  float: right;
  width: 75%;
  height: 200px;
  background-color: green;
}

@media screen and (max-width: 320px) {
 .content {
   width: 100%;
   float: none;
 }
 .sidebar{
   width: 100%;
   float: none;
   position: static;
  }
 }
</style>

Answer 3

使用

<meta name="viewport" width="device-width">

它在html5中使用，并自动格式化任何设备的网页。