android智能手机上的固定宽度html布局

疯狂的莎拉

我正在尝试构建一个简单的布局,其中标题的整个屏幕宽度为黑带,在其中为我的徽标,一些小文字等...应包含在固定宽度的列中在屏幕中间居中。

在其下方有一个固定的柱,该柱再次居中,但未包裹任何东西。

因此,我已经构建了我认为应该可以使用的功能,并且在我的PC上看起来还不错,但是在我的android智能手机上,这是一个奇怪的问题。如果我将固定宽度设置为1000px,那么标题在右侧会出现一个奇怪的间隙。我不知道为什么。

如果您拥有智能手机http://liquidlizard.net/narrower.php,则可以在此处看到问题-只需在两个链接之间单击即可。唯一的区别是在一个屏幕中,固定宽度包装器为1000,其他屏幕为900px。

这是我的代码:

<div id="header">
    <div class="mainWrapnarrow">
        <div class="font16">Belfast<span class="strong">development</span></div>
    </div>
</div>

<div class="mainWrapnarrow border">
    <a href="narrower.php">Narrower</a>
    <br/><br/>
    <a href="index.php">wider</a>
</div>

和CSS:

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 35px;
        margin: 0px;
        padding: 0px;
    color:#ffffff;
}

.left{float:left;}
.right{float:right;}
.strong{font-weight:bold;}
.border{border:1px solid#999;}
.font16{font-size:16px;}

#header{background:#000000; border-bottom:1px solid #4e4b60; line-height:100px;width:100%}

.mainWrap {width:1000px; margin:0 auto;}
.mainWrapnarrow {width:900px; margin:0 auto;}

并附加了几个屏幕快照在第二张图片上,检查屏幕右侧的白色间隙

在此处输入图片说明

在此处输入图片说明

安德烈

您正在标题div上设置黑色背景。标头div小于mainWrap div(980px),因此这就是为什么间距为20px。

标头div的宽度为980px

Android(包括Chrome)上的大多数网络浏览器默认都会将视口设置为大尺寸(称为“宽视口模式”,宽度约为980像素)

http://developer.android.com/guide/webapps/targeting.html

如果您要构建自适应网站,则应先添加视口元

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

并使用媒体查询来使您的div在移动设备上占屏幕的100%,并在台式机屏幕上为其赋予所需的宽度

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Bootstrap布局在智能手机上过宽

来自分类Dev

HTML和CSS布局在智能手机上无法正确显示

来自分类Dev

OOP设计与智能手机上的性能

来自分类Dev

在智能手机上运行VBA

来自分类Dev

android应用未出现在智能手机上

来自分类Dev

使用相机在Android智能手机上进行心率监测

来自分类Dev

App Android无法在智能手机上打开网页

来自分类Dev

如何在物理Android智能手机上跟踪运行说明/分支机构?

来自分类Dev

ScrollView 在 android studio 中工作,但不在我的智能手机上

来自分类Dev

Android Studio:应用程序在我的智能手机上运行后崩溃

来自分类Dev

我可以在Android智能手机上调试Android Wear应用程序吗?(如何)

来自分类Dev

我为何在android智能手机上有一个内部IP地址

来自分类Dev

如何仅在智能手机上编码Bootstrap手风琴

来自分类Dev

桌子宽度超过智能手机的屏幕宽度

来自分类Dev

桌子宽度超过智能手机的屏幕宽度

来自分类Dev

Github仅在智能手机上页面CSS麻烦

来自分类Dev

防止在智能手机上滚动特定屏幕尺寸

来自分类Dev

除非已缓存,否则SVG图片不会在智能手机上加载

来自分类Dev

如何在智能手机上相邻显示两个div?

来自分类Dev

React网站按钮和输入在智能手机上不起作用

来自分类Dev

为什么程序在特定的智能手机上抛出OutOfMemoryError?

来自分类Dev

使用Three.js对球体进行纹理处理无法在智能手机上使用

来自分类Dev

我在智能手机上没有任何CSS

来自分类Dev

智能手机上的位置服务-它使用哪个物理网络?

来自分类Dev

在智能手机上安装两个操作系统

来自分类Dev

返回浏览器时,PHP会话在智能手机上丢失

来自分类Dev

智能手机上的媒体查询网站视图

来自分类Dev

避免在智能手机上自动下载pdf

来自分类Dev

引导A标签在平板电脑和智能手机上不起作用

Related 相关文章

  1. 1

    Bootstrap布局在智能手机上过宽

  2. 2

    HTML和CSS布局在智能手机上无法正确显示

  3. 3

    OOP设计与智能手机上的性能

  4. 4

    在智能手机上运行VBA

  5. 5

    android应用未出现在智能手机上

  6. 6

    使用相机在Android智能手机上进行心率监测

  7. 7

    App Android无法在智能手机上打开网页

  8. 8

    如何在物理Android智能手机上跟踪运行说明/分支机构?

  9. 9

    ScrollView 在 android studio 中工作,但不在我的智能手机上

  10. 10

    Android Studio:应用程序在我的智能手机上运行后崩溃

  11. 11

    我可以在Android智能手机上调试Android Wear应用程序吗?(如何)

  12. 12

    我为何在android智能手机上有一个内部IP地址

  13. 13

    如何仅在智能手机上编码Bootstrap手风琴

  14. 14

    桌子宽度超过智能手机的屏幕宽度

  15. 15

    桌子宽度超过智能手机的屏幕宽度

  16. 16

    Github仅在智能手机上页面CSS麻烦

  17. 17

    防止在智能手机上滚动特定屏幕尺寸

  18. 18

    除非已缓存,否则SVG图片不会在智能手机上加载

  19. 19

    如何在智能手机上相邻显示两个div?

  20. 20

    React网站按钮和输入在智能手机上不起作用

  21. 21

    为什么程序在特定的智能手机上抛出OutOfMemoryError?

  22. 22

    使用Three.js对球体进行纹理处理无法在智能手机上使用

  23. 23

    我在智能手机上没有任何CSS

  24. 24

    智能手机上的位置服务-它使用哪个物理网络?

  25. 25

    在智能手机上安装两个操作系统

  26. 26

    返回浏览器时,PHP会话在智能手机上丢失

  27. 27

    智能手机上的媒体查询网站视图

  28. 28

    避免在智能手机上自动下载pdf

  29. 29

    引导A标签在平板电脑和智能手机上不起作用

热门标签

归档