我创建了一个没有使用移动主题的网站。
如果我在智能手机浏览器中打开我的网站，它会自动调整大小以适应我的移动浏览器。
例如...我已经在我的CSS代码中提及了文本框大小。移动屏幕像素大小与桌面机屏幕像素大小不同。
我的问题是，它如何将屏幕分辨率缩小到移动视图？
请解答我的疑问。
提前致谢。
浏览器如何自动调整网站以适应移动浏览？
3
- CJ Ramki
3
2你能提供你的网站链接吗？或者展示一些你的代码给我们看吗？如果没有至少看到代码，很难告诉你问题出在哪里。 - robooneus
抱歉，我只是在问移动浏览器是否会自动缩放网站以适应移动视图？ - CJ Ramki
3这取决于你的代码。 - robooneus
3个回答
5
您是否想要为手持设备调整网站内容的大小？如果您使用流体布局（宽度使用百分比而非像素），请使用以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
进一步阅读： http://developer.android.com/guide/webapps/targeting.html（该链接将带您了解如何针对Android设备进行Web应用程序开发）。
- Sascha
1
如果您想在浏览器中缩放它，请在CSS中指定，并使用所有宽度的%值。
例如：
例如：
@media handheld, only screen and (max-width: 767px) {
//mobile version css
}
- neel
1
也许你的样式表中定义了一些媒体查询，例如
@media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
这是一种针对最大宽度为1024px的屏幕定义的样式。
另一种可能性是，样式可以完全以百分比定义。这样样式会根据窗口大小而改变。
还有可能在您的代码中使用了一些脚本来调整大小。所有这一切都取决于您使用的代码。有各种方法可以根据屏幕大小适配视图。
- Leo T Abraham
7
需要使用JavaScript来实现这个吗？还是只需要使用@media和相应的样式就足以让整个网站适配移动端？ - Anuj Kaithwas
不需要，但你必须在头标签内添加<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - Leo T Abraham
根据您的网站布局，您已在各种宽度上定义了@media样式。为单个媒体屏幕定义的样式可能不足够。 - Leo T Abraham
就这样？所以只需要 <html><head></meta><style>@media{}</style></head><body><code></body> 就可以了吗？ - Anuj Kaithwas
1<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>@media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}</style></head></html> - Leo T Abraham
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接