调整 CSS 设备的大小

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"手动执行此操作，以确定它在某些设备中的外观。媒体查询可用于在视口大小上创建断点，以调整内容并在不同的屏幕分辨率下正确查看内容。

以下示例演示媒体查询如何以 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使用转换