浏览器如何自动调整网站到手机浏览？

Question

我创建了一个不使用移动主题的网站。 如果我在智能手机浏览器中打开我的网站，它会调整我的主题大小。 我的意思是，它会自动缩小我的移动浏览器的大小。 例如......我已经在CSS代码中提到了我的文本框大小。移动屏幕像素大小与桌面机屏幕像素大小不同。

我的问题是，它如何将屏幕分辨率降低到移动视图？ 请清除我的怀疑。

提前致谢。

Answer 1

您的意思是为手持设备调整网站内容的大小吗？如果您有流畅的布局（使用％而不是宽度的像素），请使用：

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

进一步阅读：http://developer.android.com/guide/webapps/targeting.html

Answer 2

如果你想在浏览器中进行缩放，请在css中告诉它。并使用​​％值中的所有宽度

例如：

 @media handheld, only screen and (max-width: 767px) {
 //mobile version css

  }

Answer 3

您的样式表中可能会定义一些媒体查询，例如

@media handheld, only screen and (max-width: 1024px) 
{
    //Style goes here
}

这是为最大宽度为1024px的屏幕定义的样式。

另一种可能性是，样式可以完全按百分比定义。这样就可以根据窗口大小更改样式。

同样，您的代码中可能会使用一些脚本来调整大小。全部取决于您使用的代码。根据屏幕尺寸，有多种方法适合视图。