Fatal编程技术网
  • android/
  • android chrome上的定心块

android chrome上的定心块

android html css google-chrome

android chrome上的定心块,android,html,css,google-chrome,center,Android,Html,Css,Google Chrome,Center,我在手机Chrome上显示我的网页时遇到了奇怪的问题。 我有一个水平居中的块，它在桌面Chrome上显示得很好，但在移动Chrome上它会粘在页面的左边框上 经过一些研究，我意识到有一个移动的“视口”，它与屏幕大小不同。 因此，以事物为中心不是一项简单的任务 我正在使用的简化标记： <body> <div class="block"> </div> </body> 我还尝试使用以下方法将块居中： left: 50%; margin

我在手机Chrome上显示我的网页时遇到了奇怪的问题。 我有一个水平居中的块，它在桌面Chrome上显示得很好，但在移动Chrome上它会粘在页面的左边框上

经过一些研究，我意识到有一个移动的“视口”，它与屏幕大小不同。 因此，以事物为中心不是一项简单的任务

我正在使用的简化标记：

<body>
    <div class="block">
    </div>
</body>
我还尝试使用以下方法将块居中：

left: 50%;
margin-left: -512px;
position: absolute;
但这也有同样的效果。 此外，我还尝试添加视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">
这也没有帮助。 我的设备具有1920x1080的硬件分辨率，它确实以约1200px的实际宽度显示页面，但默认情况下“设备宽度”为640px，如果我使用多点触摸缩放页面，它仍将左边框保持在初始位置

对我来说，最好的目标是将页面固定在某个分辨率（1200px很好，任务不需要缩放），并将块居中。但是我看不到将“设备宽度”设置为实际硬件像素大小并锁定缩放的方法。。。（我知道如何锁定缩放，但这无助于分辨率和居中）

可以轻松复制的页面示例：

它在桌面Chrome上运行良好，但在Android Chrome上已经描述了问题。

要在具有不同分辨率的设备上正确调整页面，您应该使用。通过这种方式，可以使元素的大小取决于屏幕大小。例如：

/* normal desktop */
.block {
    width: 1024px;
}

@media only screen and (max-width: 1023px) /* notebook */
{
    .block {
        width: 800px;
    }
}
@media only screen and (max-width: 793px) /* tablet */
{
    .block {
        width: 600px;
    }
}
@media only screen and (max-width: 479px) /* old smartphone */
{
    .block {
        width: 400px;
    }
}
关于居中，在你尝试做的时候欺骗精确的像素是一种不好的做法。有更通用和可靠的定心方法，如基于表格的布局或柔性箱模型。有关更多信息，请阅读本文。

假设您正在谈论水平居中：

将某个东西放在容器中居中的最简单的方法是给它一个固定的宽度，然后使用
marginleft:auto和
右边距：自动。这将使元素在其容器中居中

最好的方法是设置一个最大宽度，并在屏幕足够大时使用边距

创建一个带有背景图像的宽包装（水平居中），并将包装内的内容限制为最大1024px。然后，当屏幕比1024px窄时，让它调整大小



HTML代码示例


<html>
  <head>
    <meta name="viewport" content="width=1224">
  </head>
  <body>
    <div class="mainblock">
      <div class="topside">
        Top
      </div>
      <div class="content-wrapper">
        <div class="content">
          Content
        </div>
      </div>
      <div class="bottomside">
        Bottom
      </div>
    </div>
  </body>
</html>



body {
  width: 100%;
  margin: 0;
}

.mainblock {
  max-width: 1024px;
  width: 100%;
  height: 768px;
  margin: 0 auto;
}

.content-wrapper {
  background: url('http://lorempixel.com/1224/768/') no-repeat 50% 0;
  display: block;
  position: relative;
  max-width: 1024px;
  padding: 0;
}

.content {
  background: salmon;
  box-sizing: border-box;
  min-height: 768px;
  padding: 0;
  max-width: 1024px;
  width: 100%;
}

.topside,
.bottomside {
  max-width: 1024px;
  height: 50px;
  background-color: blue;
  margin: 0 auto;
}

@media only screen and (min-width: 1024px) {
  .mainblock, .content-wrapper {
    max-width: 1224px;
  }

  .content {
    margin: 0 auto;
    width: 1024px;
    position: relative;
    z-index: 2;
  }

}


编辑：

还可以将视口重置元标记添加到HTML代码的
头部分
：


<meta name="viewport" content="width=1224">






编辑2:


创建了一个新的演示（）并更新了初始答案。
每个设备和浏览器都有一个用户代理，您只能对chrome android浏览器执行特定规则。这是我所说的一个例子：


<script type="text/javascript">

        $(document).ready(function() {

            var userAgent = navigator.userAgent;
            var cssIosURL = '<link href="${contextPath}/css/ios.css" rel="stylesheet">';
            var cssNativeAndroidURL = '<link href="${contextPath}/css/nativeAndroid.css" rel="stylesheet">';
            var cssAndroidChromeURL = '<link href="${contextPath}/css/androidChrome.css" rel="stylesheet">';

            if (userAgent.indexOf('Mac OS') >= 0) {
                if (userAgent.indexOf('Mobile') >= 0) {
                    $('head').append(cssIosURL);
                }
            }

            if (userAgent.indexOf('Android') >= 0) {
                if ((userAgent.indexOf('Firefox') < 0) && (userAgent.indexOf('Chrome') < 0) && (userAgent.indexOf('Opera') < 0)) {
                    $('head').append(cssNativeAndroidURL);
                } else {
                    $('head').append(cssAndroidChromeURL);
                }
            }

        });

    </script> 




$（文档）.ready（函数（）{
var userAgent=navigator.userAgent；
var cssIosURL=“”；
var cssNativeAndroidURL=''；
var cssAndroidChromeURL=''；
if（userAgent.indexOf（'Mac OS'）>=0）{
if（userAgent.indexOf（'Mobile'）>=0）{
$（'head'）。追加（cssIosURL）；
}
}
if（userAgent.indexOf（'Android'）>=0）{
if（（userAgent.indexOf（'Firefox'）<0）和&（userAgent.indexOf（'Chrome'）<0）和&（userAgent.indexOf（'Opera'）<0））{
$（'head'）.append（cssNativeAndroidURL）；
}否则{
$（'head'）。追加（cssAndroidChromeURL）；
}
}
});

我建议将块的CSS更改为如下：


.block {
position: absolute;
width: 200px;
height: 200px;
background-color: red;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}


无论容器的宽度是多少，都要使
左边距
等于
宽度的一半

我上面的代码将在页面上水平和垂直居中

像这样：

刚刚在我的Android手机上检查了Chrome，它在JSFIDLE页面上运行良好。
要居中“块”对象，您可以尝试以下方法：


.block {
    display: block;
    margin: 0 auto;
    width: 30em;
    height: 60em;
    background-color: red;
}



如果没有，请尝试使用
标记。我知道它已经停产了，但值得一试。另外，不要使用
margin:auto
尝试
margin:0px auto
CSS


body {
    width: 100%;
    margin: 0;
}
.block {
    display: flex;
    position: relative;
    width: 1024px;
    height: 768px;
    background-color: red;
    top: 44px;
    margin: auto;
}


HTML


 <div class="block">
    </div>







看看CSS的
flex
属性
我看不出在主体上有100%宽度的意义。不过，您应该提供更多信息或上下文

我试过了


  • 移除
    宽度：100%来自正文
    • 

  • 为了进行测试，在块的两侧加上边框，看看它是否居中。看起来它在工作
    • 

  • 根据您的上下文，尝试将
    overflow:hidden
    放在正文上
    • 
如果您提供更多信息，将对我们有用。
    
这是我需要你看看的东西。基本上，我根据您提供的内容更改了一些代码，使其更加灵活
    
现在主块是您的主要元素
    

    .mainblock {
    width: 1024px;
    height: 768px;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

    

    不过我需要你的意见。。。我需要知道我是在左栏还是在左栏。
    问题是我不需要依赖屏幕大小的大小。该项目是一个游戏，大小应该是固定的。在桌面上，我只是将内容块定在屏幕上。最有可能的是，你应该考虑移动设备的移动版本。即使你会以某种方式解决定心问题，你肯定会面临更复杂的问题。除了定心和声音，游戏运行得很好。我知道如何解决声音的问题，唯一无法解决的问题是居中。尝试使用问题中显示的变换的缩放特性，我不知道适合窗口的确切宽度和高度。浏览器告诉我错误的值与实际可见区域不匹配。因此，我不知道w

    .mainblock {
    width: 1024px;
    height: 768px;
    position: relative;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}