CSS 浏览器如何自动调整网站大小以进行移动浏览？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18505044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How browser auto resize website to mobile browse?
提问by CJ Ramki
I created a website without using mobile theme. If i open my website in my smart phone browser, it resizing my theme. I mean, It automatically reduce the size to my mobile browser. For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
我创建了一个没有使用移动主题的网站。如果我在智能手机浏览器中打开我的网站，它会调整我的主题大小。我的意思是，它会自动缩小我的移动浏览器的大小。例如...我已经在我的 CSS 代码中提到了我的文本框大小。手机屏幕像素大小与台式机屏幕像素大小不同。
My Question is, how it reduce the screen resolution to mobile view? please clear my doubt.
我的问题是，它如何将屏幕分辨率降低到移动视图？请清除我的疑问。
Thanks in advance.
提前致谢。
采纳答案by Leo T Abraham
Either there might be some media queries defined within your stylesheet like
您的样式表中可能定义了一些媒体查询，例如
@media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
这是为最大宽度为 1024 像素的屏幕定义的样式。
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
另一种可能性是，样式可以完全按百分比定义。以便根据窗口大小更改样式。
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
同样，您的代码中可能会使用一些脚本来调整大小。一切都取决于您使用的代码。根据屏幕尺寸有多种适合视图的方法。
回答by voodoocode
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
您的意思是为手持设备调整站点内容的大小吗？如果您有流畅的布局（宽度用 % 而不是像素），请使用：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
进一步阅读：http: //developer.android.com/guide/webapps/targeting.html
回答by neel
if you want scale it in browser tell it in css.And use all width in % values
如果你想在浏览器中缩放它，请在 css 中告诉它。并使用 % 值中的所有宽度
eg:
例如：
@media handheld, only screen and (max-width: 767px) {
//mobile version css
}
