![](/img/trans.png)
[英]How to resize a image that is displaying as stretched only on mobile phones?
[英]How to resize html pages on mobile phones
我是 HTML 和 CSS 开发的新手。 我创建了一个在 PC 网络浏览器上看起来不错的 html。
但是,当我使用我的Android手机浏览器查看它时,由于手机屏幕太小,需要进行很多滑动才能定位到我想要聚焦的区域。
我的网页中间只有一个索引表,而正文的左右都是空白的。 我在想是否有任何方法可以检测浏览器以查看它是否来自移动设备,然后调整页面正文的大小?
欢迎任何建议。 提前致谢。
它是:
你应该看看并学习一些像这样的响应式网站代码。
如果您不希望在较小的屏幕上出现水平滚动条,请尝试在开头标记<meta content='width=device-width, initial-scale=1' name='viewport'/>
之后添加此代码。
今天最流行的方法是使用 CSS 媒体查询。 媒体查询中的任何代码仅适用于指定的参数。 这通常适用于浏览器的高度和宽度,但它也适用于打印的样式表、显示分辨率和其他一些东西。
这是一个示例,目标浏览器宽度介于 320 像素和 480 像素之间,这是智能手机的常见尺寸。
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
background: #999;
width: 100%;
}
}
您可以在此处找到更多示例: http : //css-tricks.com/snippets/css/media-queries-for-standard-devices/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.