本文將教您ipad IOS6 上的safari 如何不縮放HTML5 影片填充100% 的頁面寬度在響應式HTML5 頁面上，可以透過應用以下CSS 以全寬(100% ) 顯示影片。影片的原始解析度為 480x270。在所有桌面瀏覽器上，影片都會調整大小以跨越頁面的整個寬度，同時保留寬高比。
但是，在 iPad (iOS 6.0.1)、Mobile Safari 和 Chrome 上，顯示與頁面寬度相同的黑色矩形。黑色矩形的中心包含一個小視頻，其原始解析度為 480x270 像素。
以下是 ipad IOS6 上的 safari 如何在響應式 HTML5 頁面上不縮放 HTML5 影片以填充 100% 頁面寬度的範例
在下面的範例中，我們將在 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 屬性設定的所有來源。
在以下範例中，我們使用位置設定為絕對的
<!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>
當腳本執行時，將彈出輸出窗口，將影片顯示在網頁上，使其適合所有來源。
以上是iPad上的Safari瀏覽器（iOS6）無法將HTML5影片縮放至填滿頁面寬度的100%的詳細內容。更多資訊請關注PHP中文網其他相關文章！
