html - 调整 CSS 设备大小

Question

我正在使用来自 https://marvelapp.github.io/devices.css/ 的 iPhone CSS 设备

但是，我找不到一种智能方法来调整它的大小以适应移动设备。我发现的唯一方法是更改​​元视口(viewport)的初始比例，但这会改变整个 Bootstrap 网站在移动设备上的显示方式，而不仅仅是移动设备。

有没有办法改变 CSS 模型所在的特定 div 的比例，或者有其他方法让设备调整大小以适应移动 View ？

Answer 1

transform: scale() 似乎有效。

可以根据视口(viewport)宽度使用 JS 设置 scale 以使其适合屏幕。

.small {
  transform: scale(0.5);
}

<link href="//marvelapp.github.io/devices.css/assets/devices.min.css" rel="stylesheet"/>


<div class="marvel-device iphone6 silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

<div class="marvel-device iphone6 silver small">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>
    <div class="screen">
        <!-- Content goes here -->
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>