调整大小CSS设备

Question

我使用的是iPhone CSS设备从https://marvelapp.github.io/devices.css/

但是，我无法找到一个聪明的方法，使其调整到适应移动设备中。我发现的唯一方法是改变元视口的初始缩放比例，但这会改变整个Bootstrap网站在移动设备上的显示方式，而不仅仅是移动设备。

有没有一种方法可能更改CSS模型所在的特定div的缩放比例或其他方式来使设备调整为移动视图？

Answer 1

A 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

你必须做到这一点使用“媒体”手动，以确定它应该是什么样子的某些设备。 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