在小屏幕上的页面布局 [英] Layout of the page on small screens

问题描述

你可以看到下面的示例图片，我的布局...网站工作得很好。但我在左侧使用了一个图片，内容部分。

因此，如果通过一个小屏幕，如笔记本电脑或手机访问，内容部分不适合屏幕。它从图像的左侧开始显示。所以，内容部分在右侧流出一点，与任何其他960 px网站的内容不适合屏幕。它在右侧流出一点，因为有150像素宽的图像。

我如何解决这个问题？

如果通过小屏幕访问，则无需显示图片。

/jsfiddle.net/yHC4w/rel =nofollow noreferrer> JSFiddle

解决方案

对于移动优化，您还应添加一些元标记来控制缩放系数。

Like this here：

 < meta name =HandheldFriendlycontent =true/> 
< meta name =viewportcontent =user-scalable = no，width = device-width，maximum-scale = 1.0/> 
< meta name =apple-mobile-web-app-capablecontent =yes/> 
  

要添加特殊css规则，请在此处尝试：

 < style type =text / cssmedia =screen> 
 / *移动横向尺寸到平板电脑肖像（设备和浏览器）* / 
 @media只有屏幕和（最小宽度：480像素）和（最大宽度：630像素）{
。 。
} 
 
 / *移动肖像尺寸到移动景观尺寸（设备和浏览器）* / 
 @media只有屏幕和（max-width：479px）{
 ... 
} 
< / style> 
  

You can see the sample image below, my layout... The web site works fine enough. But I used an image on left side, out of the content part.

So, if visited via a small screen like notebook or mobile, the content part doesnt fit to the screen. It starts to show from left side of the image. So, the content part flows out on right side a bit and unlike any other 960 px website the content doesnt fit to the screen. It flows out a bit on right side because there is the image for 150 px wide.

How can I solve this?

No need to show the image if visited via small screens. Or.. is there any other solution?

Edit: JsFiddle

JSFiddle

解决方案

Simply allow to show your content with lesser width.

For mobile optimation you should also add some meta tags to control the zoom factor.

Like this here:

<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" />

For adding special css rules try this here:

<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>

这篇关于在小屏幕上的页面布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！