视口不缩放到中心 | 视口不缩放到中心

本文介绍了视口不缩放到中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在网站上使用这个

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

这篇关于视口不缩放到中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！