android - android chrome 上的居中 block

coder 2023-12-23 原文

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

经过一番研究后，我意识到存在与屏幕尺寸不同的移动“视口(viewport)”。因此，让某些东西居中并不是一件简单的事情。

我使用的简化标记:

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

还有 CSS:

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

我也试过使用以下方法使 block 居中:

left: 50%;
margin-left: -512px;
position: absolute;

但那有同样的效果。我也尝试添加视口(viewport)元标记:

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

这也无济于事。我的设备有 1920x1080 的硬件分辨率，它显示的页面实际宽度约为 1200 像素，但默认情况下“设备宽度”为 640 像素，如果我使用多点触控缩放页面，它仍将左边框保持在初始位置。

对我来说，最好的目标是将页面固定在某个分辨率(1200 像素就可以了，我的任务不需要缩放)并且 block 居中。但是我看不到将“设备宽度”设置为真实硬件像素大小并锁定缩放比例的方法……(我知道如何锁定缩放比例，但它对分辨率和居中没有帮助)。

可以轻松复制的页面示例:http://37.48.93.204/androidtest.htm

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

最佳答案

假设您在谈论水平居中:

在容器中居中的最简单方法是给它一个固定的宽度，然后使用 margin-left: auto; 和 margin-right: auto;。这将使元素在其容器中居中。

最好的方法是设置最大宽度，并在屏幕尺寸足够大时立即调整边距。

使用背景图像创建一个宽包装器(水平居中)并将该包装器内的内容限制为最大 1024 像素。然后在屏幕窄于 1024 像素时调整大小。

DEMO

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>

CSS 代码示例

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

}

编辑:

同时将视口(viewport)重置元标记添加到 HTML 代码的 head 部分:

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

编辑 2:

创建了一个新的演示 (http://codepen.io/anon/pen/dPzJPX) 并更新了初始答案。

关于android - android chrome 上的居中 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28023892/

有关android - android chrome 上的居中 block的更多相关文章

ruby - RSpec - 使用测试替身作为 block 参数 - 2
我有一些Ruby代码，如下所示:Something.createdo|x|x.foo=barend我想编写一个测试，它使用double代替block参数x，这样我就可以调用:x_double.should_receive(:foo).with("whatever").这可能吗？最佳答案 specify'something'dox=doublex.should_receive(:foo=).with("whatever")Something.should_receive(:create).and_yield(x)#callthere
ruby-on-rails - Enumerator.new 如何处理已通过的 block ？ - 2
我在理解Enumerator.new方法的工作原理时遇到了一些困难。假设文档中的示例:fib=Enumerator.newdo|y|a=b=1loopdoy[1,1,2,3,5,8,13,21,34,55]循环中断条件在哪里，它如何知道循环应该迭代多少次(因为它没有任何明确的中断条件并且看起来像无限循环)？最佳答案 Enumerator使用Fibers在内部。您的示例等效于:require'fiber'fiber=Fiber.newdoa=b=1loopdoFiber.yieldaa,b=b,a+bendend10.times.m
ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2
我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？最佳答案试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问
ruby-on-rails - openshift 上的 rails 控制台 - 2
我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新rubygems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems
ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
ruby - 在匿名 block 中产生 - 2
我没有理解以下行为(另请参阅inthisSOthread):defdef_testputs'def_test.in'yieldifblock_given?puts'def_test.out'enddef_testdoputs'def_testok'endblock_test=procdo|&block|puts'block_test.in'block.callifblockputs'block_test.out'endblock_test.calldoputs'block_test'endproc_test=procdoputs'proc_test.in'yieldifblock_gi
ruby - Ruby 中的单 block AES 解密 - 2
我需要尝试一些AES片段。我有一些密文c和一个keyk。密文已使用AES-CBC加密，并在前面加上IV。不存在填充，纯文本的长度是16的倍数。所以我这样做:aes=OpenSSL::Cipher::Cipher.new("AES-128-CCB")aes.decryptaes.key=kaes.iv=c[0..15]aes.update(c[16..63])+aes.final它工作得很好。现在我需要手动执行CBC模式，所以我需要单个block的“普通”AES解密。我正在尝试这个:aes=OpenSSL::Cipher::Cipher.new("AES-128-ECB")aes.dec
安卓apk修改(Android反编译apk) - 2
最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路
ruby-on-rails - 无法在 Rails 助手中捕获 block 的输出 - 2
我在使用自定义RailsFormBuilder时遇到了问题，从昨天晚上开始我就发疯了。基本上我想对我的构建器方法之一有一个可选block，以便我可以在我的主要content_tag中显示其他内容。:defform_field(method,&block)content_tag(:div,class:'field')doconcatlabel(method,"Label#{method}")concattext_field(method)capture(&block)ifblock_given?endend当我在我的一个Slim模板中调用该方法时，如下所示:=f.form_field:e
ruby-on-rails - Ruby - 如何从 ruby 上的 .pfx 文件中提取公钥、rsa 私钥和 CA key - 2
我有一个.pfx格式的证书，我需要使用ruby提取公共(public)、私有(private)和CA证书。使用shell我可以这样做:#ExtractPublicKey(askforpassword)opensslpkcs12-infile.pfx-outfile_public.pem-clcerts-nokeys#ExtractCertificateAuthorityKey(askforpassword)opensslpkcs12-infile.pfx-outfile_ca.pem-cacerts-nokeys#ExtractPrivateKey(askforpassword)o

android - android chrome 上的居中 block

有关android - android chrome 上的居中 block的更多相关文章

随机推荐