如何在html和css中複製這個@media屏幕效果？

我在我的html中有一個視頻，我最好不想在平板電腦&移動設備瀏覽器上玩，只是臺式機。我遇到了這個網站「https://www.myprovence.fr」，完全反映了這一點。如何在html和css中複製這個@media屏幕效果？

正如您在着陸頁上看到的那樣，它們在標題中有一個視頻，當縮小到特定的突破點時，顯示一個圖像（我猜測的背景圖像），這並不是什麼大的功夫。然而，我在Xcode，&它在iPad Pro的仿真器加載該網站上的移動Safari瀏覽器也，而不是顯示實際的視頻，有圖片：

enter image description here

正如我們所知，在iPad Pro的屏幕尺寸遠遠超過2000像素，所以我懷疑使用@media屏幕方法。那麼他們是如何在視頻僅在桌面瀏覽器上播放的情況下產生這種效果的？

這裏是我的html：

<div class="second-section"> 
    <video class="rocky" autoplay="true" loop> 
     <source src="rocky_2.mp4" type="video/mp4"> 
     <source src="rocky_2.webm" type="video/webm"> 
    </video> 
    <div class="overlay"></div> 
    </div>

和我的CSS：

.second-section { 
    position: relative; 
    height: 100vh; 
    background-color: #CD9B9B; 
    background-position: center; 
    background-size: cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-shadow: 0 1px 3px rgba(0,0,0,.8); 
    text-align: center; 
    overflow: hidden; 
} 
.rocky { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    background: transparent; 
    object-fit: contain; 
}

任何解決方案？

來源

2016-02-12 John Durand

也許他們正在測試'觸摸設備'（modernizr？）能力或使用服務器端設備檢測？ – davidelrizzo

對不起，你能詳細說明一下嗎？ @davidelrizzo –

如果你檢查他們的[stylesheet]（https://www.myprovence.fr/dist/css/style.css），你會注意到@media被多次使用。 –

因此，我似乎已經能夠通過基於分辨率而不是屏幕尺寸的媒體查詢來定位桌面瀏覽器。下面是該查詢：

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) { 
    .rocky { 
    display: none; 
    } 
}

通過這樣做，視頻不能在iPad上/ iPhone的瀏覽器玩，但仍然沒有在桌面瀏覽器。說實話，我不能完全包裹在使用這種方法的親和騙局，所以如果有人可以提供輸入您的歡迎:)

來源

2016-02-12 10:04:37

我在哪裏可以找到移動/ pc/mac像素比例和dpi信息？ –

特定設備的含義？ @Leandro –

我的意思是@media屏幕尺寸很容易，因爲我們頭上已經有各種設備的數量，但像素比例已經很大。 [這篇文章]（http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio）說，iPhone 4S的像素比例爲2.所以你的例子（1.5）不是有效的iphone 4S。 –

如何在html和css中複製這個@media屏幕效果？

回答

相關問題