个人中心
gpt4 book ai didi

html - Bootstrap 改进了移动设备上的缩放

转载 作者：行者123 更新时间：2023-11-28 05:34:18 25 4
gpt4 key购买 nike

我有一个游戏即将发布，这是我第一次制作网页。它在台式机和笔记本电脑上看起来不错，但位置和大小在我的手机上显示不佳。

这是手机屏幕截图。视频尺寸有点小。与上述内容相比，联系人/电子邮件/社交媒体图片比例过大。我也不喜欢所有内容都如此狭窄并适合一个 View ，从而消除了滚动。

enter image description here

我的 Mac Air 上使用 Chrome 的页面也有问题。社交媒体链接不会显示在底部。这是 Chrome 的底部。当我通过打开 html 文件在我的机器上本地查看页面时，不会出现此问题，只有当我转到我的网站时才会出现。

enter image description here

编辑:按照建议，这里是我的 html/css 文件的内容，而不是要求人们查看页面源代码。非常感谢任何能帮助我解决这些问题的人!

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Risky Bee</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <img src="WebBG1a.jpg" style="display:none;"> 
  <body>

    <div class="container-fluid">

      <div class="row">
        <img src=WebTrio3c.png class="img-responsive center-block">
      </div>

      <div class="row">
        <img src=WebJuly21c.png class="img-responsive center-block" id="mar40">
      </div>

      <div class ="row" id="mar40">
        <div class="col-xs-8 col-xs-offset-2">
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen></iframe>
          </div>
        </div>
      </div>

      <div class="row">
        <img src=WebContactc.png class="img-responsive center-block" id="mar102">
      </div>

      <div class="row">
        <div class="img-responsive">
          <a href="mailto:support@riskybee.com" title="Email">
            <img src=WebEmailc.png class="center-block" id="mar25">
          </a>
        </div>
      </div>

      <div class="row" id="mar20">
        <div class="col-xs-6">
          <div class="img-responsive">
            <a href="https://facebook.com/RiskyBeeGame" title="Facebook">
              <img src=WebFacebook8c.png class="pull-right">
            </a>
          </div>
        </div>

        <div class="col-xs-6">
          <div class="img-responsive">
            <a href="https://twitter.com/riskybeegame" title="Twitter">
              <img src=WebTwitter7c.png>
            </a>
          </div>
        </div>

      </div>

    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS:

/* Links */
a,
a:focus,
a:hover {
  color: #fff;
}

/*
 * Base structure
 */
html {
  background: url(../WebBG1a.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  padding-top: 1.75%; /*1.75%*/
  padding-bottom: 1.75%; /*1.75%*/
  padding-left: 10%;
  padding-right: 10%;
  background: transparent;
}

#mar20 { /*1.5%*/
  margin-top: 1.5%;
}

#mar25 { /*1.75%*/
  margin-top: 1.75%;
}

#mar40 { /*2.75%*/
  margin-top: 2.75%;
}

#mar102 { /*8.6%*/
  margin-top: 8.6%;
}

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

编辑#2:

我通过执行以下操作使视频显示效果更好:

  <div class ="row center-block rbvideo">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen></iframe>
    </div>
  </div>

但是在较大的 View 上宽度太大，所以我给了它一个最大宽度。

.rbvideo {
  margin-top: 40px;
  max-width: 750px;
}

我还将我的 css 文件中的各种边距间距更改为 px 而不是百分比，当 View 大小减小时，这会更好地展开内容。现在我只需要弄清楚如何在 View 变小时让接触部分缩小一点。现在它们保持相同的大小。

关于 Chrome 不显示社交媒体项，我终于意识到是 AdBlock Plus 阻止了它们。我已将两个图像的文件名更改为不包含“twitter”或“facebook”，但它们仍被阻止。有人知道我能做些什么来防止这种情况发生吗？我在其他网站上看到过相同的 html 代码，ABP 没有阻止它们...

最佳答案

对你来说是一个非常粗略的例子，因为我以前从未真正玩过它。

其本质是:

  <div class="row">
  <div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-5 col-md-2 test">
    <p align='center'>
    SOMETHING
    </p>
    </div>
  </div>

https://jsfiddle.net/madivad/s4jbyvL0/1/

在此示例中，适合最小分辨率“xs”的设备将显示整个宽度(12 列)

那些适合小“sm”范围的人将通过抵消前两列来利用中间的 8。

中等“md”屏幕将小得多，有 5 个偏移列和 2 列宽

编辑:

此外，您正在使用 id 标记作为上边距 #mar20 等

这些也应该是类，只是添加到类标签中:例如:

<div class="row mar20">

在你的 CSS 中

.mar20{
    .... margin stuff
}

编辑#2:

使用 chrome 检查器，我刚刚更改了 youtube 嵌入的代码，这更符合您的预期，只需修改以使其完全符合您的喜好

<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-4 col-md-8 col-centered">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/FjtfCwNj8yU?rel=0" allowfullscreen=""></iframe>
      </div>
</div>

编辑边距:另外，考虑取消最小设备的边距。以下为说明夸大:

正文{ 边距:10px；

.测试{ 背景色:红色；

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
  body{
    padding-left: 0;
    padding-right: 0;
  }
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
  body{
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  body{
    padding-left: 20%;
    padding-right: 20%;
  }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
  body{
    padding-left: 25%;
    padding-right: 25%;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
  body{
    padding-left: 30%;
    padding-right: 30%;
  }
}

关于html - Bootstrap 改进了移动设备上的缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38318604/

25 4 0
文章推荐： javascript - 创建对话框时未捕获 TypeError : $(. ..).dialog 不是函数错误
文章推荐： javascript - Google Material 图标字体 - 完整浏览器支持指南？
文章推荐： javascript - 数组中对象属性的 getter / setter
文章推荐： javascript - 使用 Ajax、jquery、Node.js 和 Express POST 数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com