使用引导程序进行屏幕旋转和响应答案

【问题标题】：screen rotation and responsiveness with bootstrap使用引导程序进行屏幕旋转和响应
【发布时间】：2014-12-20 19:47:58
【问题描述】：

我正在使用引导程序在 div 中显示一些缩略图。缩略图实际上是画布，因为我需要在客户端创建更轻的缩略图。

它实际上并不是完美的设计（我更像是一名开发人员而不是设计师）但它工作得很好。

但是我想知道以下几点：当我用手机以纵向模式查看应用程序时，我得到 col-xs-6 类，并且屏幕看起来很好。但是当我旋转屏幕时，我似乎仍然得到 col-xs-6 及其相关的像素大小 - 看起来很丑 - 截图：

这是手机或手机浏览器（使用 Galaxy S3）上的错误 - 还是我的代码错误？旋转浏览器不应该给出不同的分辨率吗？我是否应该忽略这个问题，因为也许没有优雅的解决方案？这是 HTML：

<div id="upload-list">
   <!-- for each image -->
   <div class="col-xs-6 col-sm-3 col-md-3">
     <div class="thumbnail">
       <div class="caption">IMG_0004.JPG<i><br>6.14 MB</i></div>
       <div style="display: none;" class="abort_upload working">
         <span class="alert-warning glyphicon glyphicon-remove-circle"></span>
       </div>
       <!-- This is for upload progress display -->
       <div class="knob-outer">
          <div class="knob-progress">
            <div style="display:inline;width:64px;height:64px;">
              <canvas height="64" width="64"></canvas>
              <input style="width: 36px; height: 21px; position: absolute; vertical-align: middle; margin-top: 21px; margin-left: -50px; border: 0px none; background: none repeat scroll 0% 0% transparent; font: bold 12px Arial; text-align: center; color: rgb(7, 136, 165); padding: 0px;" readonly="readonly" value="0" data-width="64" data-height="64" data-fgcolor="#0788a5" data-readonly="1" data-bgcolor="#3e4043" type="text">
           </div>
          </div>
       </div>
       <!-- the actual canvas with the image, is being generated client-side after file selection -->
       <canvas class="canvas-thumbnail" height="518" width="691"></canvas>
     </div>
  </div>
</div>

相关CSS：

@media (min-width: $screen-xs-min) {
  .thumbnail canvas.canvas-thumbnail { height:72px !important; width: 96px !important}
  .knob-progress {width: 64px; height: 64px}
}
$screen-xs:                  420px !default;
$screen-xs-min:              $screen-xs !default;

编辑：其他屏幕尺寸 css

$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;

$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;

@media (min-width: $screen-sm-min) {
  .thumbnail canvas.canvas-thumbnail { height:64px !important; width: 86px !important}
}

@media (min-width: $screen-md-min) {
  .thumbnail canvas.canvas-thumbnail { height:95px !important; width: 126px !important}
}

【问题讨论】：

标签： android html css twitter-bootstrap responsive-design

【解决方案1】：

还有另外两种屏幕分辨率。你必须处理所有事情。例如你有分辨率：800x600，但如果你旋转手机，你现在有 600x800。您必须在引导程序中看到有关宽度和句柄的阈值。

【讨论】：

在您的情况下，这是 720x1280。如果你旋转手机，这是 1280x720
n 我认为您必须检查设备的类型（例如检查名称/操作系统的类型），因为如果您旋转手机，桌面宽度正常。
我确实有更多的 CSS，请检查我在帖子中的编辑。真正让我感到困惑的是，当我旋转屏幕时，正如您在屏幕截图中看到的那样，它选择 col-xs-6 - 而不是 col-md-3 甚至 col-sm-3（检查 HTML），这应该如果屏幕尺寸现在是桌面则应用？？？
你可以使用java脚本来检查这个。 Java 脚本可以为您的 css 返回操作系统 - 当操作系统 = xyz 时，您必须设置您的样式。不改变宽度 - 实际上在这种情况下不起作用，因为我们有移动桌面分辨率。
你可以使用java脚本来检查这个。 Java 脚本可以为您的 css 返回操作系统 - 当操作系统 = xyz 时，您必须设置您的样式。不改变宽度 - 实际上在这种情况下不起作用，因为我们有移动桌面分辨率。 Bootstrap 没有代码来检查这个，jQuery 有这个。如果你使用 bootstrap，你可能会使用 jQuery 来实现良好的 bootstrap。