移动网站html元素太宽 [英] Mobile website html element too wide

问题描述

我正在设计网站的移动版本，应该类似于移动应用程序.

I'm designing a mobile version of my website, which should be like a mobile application.

问题是我的移动浏览器中的html元素的宽度很奇怪.我尝试将body和html设置为width:480px;内容为480像素，但即使如此，内容旁边还是有很多空白(估计约为300像素).这样做的效果还在于，网站不会缩放到内容，而是缩放到内容+空白，并且您首先必须放大才能正确使用网站.

The problem is that there is a strange width to my html element in my mobile browser. I have tried setting body and html to width:480px; and the content is 480px but even then there is a lot of whitespace next to the content (estimated at about 300px). The effect of this is also that the website is not zoomed to the content but to the content + the whitespace and you first have to zoom in to properly use the website.

当然我想使用width:100％;因此它可以在不同的屏幕尺寸上很好地呈现.

Ofcourse I want to use width:100%; so it renders well on different screen sizes.

有人知道发生了什么或如何解决?

Does anyone know what's going on or how to fix it?

修改 html代码只是简单的xhtml过渡，没什么特别的.在CSS中，我有:

Edit The html code is just straightforward xhtml transitional, nothing special. In the css I have:

body, html {
width:480px !important;}

但是，如果我不为这些宽度设置宽度，那应该正确吗?我也没有设置任何其他元素的宽度(除了按钮100px之类的东西以外)，如果我在计算机上查看移动版本，似乎没有元素比身体宽.

But if I would not set a width to those it should work right? I also don't set a width for any other elements (other than like buttons 100px and things like that) and if I view the mobile version on my computer no elements seem to be wider than the body.

推荐答案

是否添加了viewport元标记?

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这篇关于移动网站html元素太宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！