您可以在下面看到示例图像,我的布局...该网站运行良好。但是我在内容部分之外的左侧使用了一张图片。
因此,如果通过笔记本或手机等小屏幕访问,内容部分不适合屏幕。它从图像的左侧开始显示。因此,内容部分从右侧流出一点,与任何其他 960 像素网站不同,内容不适合屏幕。它在右侧流出一点,因为有 150 像素宽的图像。
我该如何解决这个问题?
如果通过小屏幕访问,则无需显示图像。或者..还有其他解决方案吗?
编辑:JsFiddle
最佳答案
只允许以较小的宽度显示您的内容。
对于移动优化,您还应该添加一些元标记来控制缩放系数。
像这样:
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="user-scalable=no, width=device-width, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
要添加特殊的 css 规则,请在此处尝试:
<style type="text/css" media="screen">
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 630px) {
...
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
...
}
</style>
关于css - 小屏幕上的页面布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30916479/