調整大小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