Question

我正在使用https://marvelapp.github.io/devices.css/

中的iPhone CSS设备

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

是否有办法可以更改CSS模型所在的特定div的比例，或者为移动视图调整设备大小的其他方法？

Answer 1

transform: scale()似乎有效。

可以使用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>

Answer 2

您必须使用“medias”手动执行此操作，以确定它在某些设备中的外观。 Media Queries可用于在视口大小上设置断点，以调整内容并在不同的屏幕分辨率下正确查看内容。

以下示例显示了媒体查询如何以320px宽的分辨率更改某些现有值de .marvel-device.iphone6和.marvel-device.iphone6 .sensor。

@media only screen and (max-width : 320px) {
    .marvel-device.iphone6{
        width: 320px; /*Or the new width you want in pixels*/
        height: 480px; /*Or the new height you want in pixels*/
    }
    .marvel-device.iphone6 .sensor{
        left: 50px; /*Or the left position for the sensor*/
    }
}

正如我之前所说，我不知道另一种更好的方法，但手动操作，因此您需要复制该代码，并修改这些值以适合您想要的屏幕分辨率。除非您可以对整个.marvel-device

使用转换

调整CSS设备的大小

2 个答案: