视口不缩放到中心 [英] Viewport doesn't scale to center
问题描述
我在网站上使用这个
<meta name="viewport" content="width=200px, initial-scale=0.5, user-scalable=no">在我的 CSS 文件中，我有这个用于重新定位一些元素
In my CSS file I have this for repositioning some elements
@media screen and (max-width: 767px) {
#wb_element_instance3{display: none}
#wb_element_instance11 {left: 280px}
#wb_element_instance12 {left: 570px}
#wb_element_instance13 {left: 655px}
#wb_element_instance14 {left: 705px}
}现在是我的问题.当我用手机访问我的网站时，@media"中的内容工作正常，但视口缩放到网站中心有点偏移.
And now my problem. When I access my website with my phone the stuff in "@media" works fine but the viewport scales a bit offset that to the center of the site.
那么，有没有办法让它以某种方式居中?
So, is there a way to center it somehow?
非常感谢！
推荐答案
您提供的信息非常少，可以帮助解决问题，但一些一般性建议适用.1) 绝对定位(使用顶部/左侧等)不是一个好主意，尤其是当您在编码时希望以多种尺寸的设备为中心.
You've given very little information to help solve the issue, but some general pointers apply. 1) Absolute positioning (using top/left etc.) is not a good idea, especially if you're coding with a view to centering on devices of multiple sizes.
2) 通过添加其他媒体查询，您可以更好地满足不同尺寸的设备的需求.例如@media only screen and (min-width:480px) and (max-width:640px){} 或
2) You could cater better for different size devices by adding other media queries.
e.g. @media only screen and (min-width:480px) and (max-width:640px){
} or
@media only screen and (max-width:480px){/*your css here*/}
等等.
居中通常可以通过使用 margin 属性或 text-align 来完成.请记住，某些 css 会影响其他 css 属性.如果您将图像居中，请为其指定宽度(以百分比为单位)，然后您可以使用 margin: 0 auto 或 margin-left:auto;和 margin-right:auto;
Centering can usually done by using the margin property or text-align. Bear in mind that some css can affect other css properties. If you are centering an image, assign it a width (in percentage) and then you could use margin: 0 auto or margin-left:auto; and margin-right:auto;
(文本对齐)居中示例:
Example of (text-align) centering:
.wb_example{
text-align:center;
}<body>
<p class="wb_example">Hello</p>
</body>这篇关于视口不缩放到中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
