資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究iPad（iOS6）上的Safari無法將HTML5影片縮放以填充頁面寬度的100%
本文將教你如何在iPad iOS6上的Safari無法縮放HTML5影片以填充頁面寬度在響應式HTML5頁面上，可以透過應用以下CSS將影片顯示為全寬（100%）。影片的原始解析度為480x270。在所有桌面瀏覽器上，影片都會調整大小以跨越頁面的整個寬度，同時保持縱橫比。
然而，在iPad（iOS 6.0.1）上，Mobile Safari和Chrome顯示了一個與頁面寬度相同的黑色矩形。黑色矩形的中心包含一個以其原始解析度480x270畫素顯示的小影片。
以下是關於iPad iOS6上的Safari無法縮放HTML5影片以填充頁面寬度在響應式HTML5頁面上的示例
示例1
在以下示例中，我們正在style屬性內設定影片的寬度和高度。
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
<body>
<video preload autoplay controls>
<source src=https://samplelib.com/lib/preview/mp4/sample-5s.mp4>
</video>
</body>
</html>
執行上述指令碼後，它將生成包含網頁上上傳的影片的輸出，並使其適合使用style屬性設定的所有來源。
示例2
在以下示例中，我們使用<video>並將position設定為absolute。
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
position: absolute;
}
</style>
<body>
<video preload autoplay controls>
<source src="Https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
</video>
</body>
</html>
當指令碼執行時，輸出視窗將彈出，在網頁上顯示影片，使其適合所有來源。
更新於：2022年12月15日
797 次瀏覽
廣告