確定:手機螢幕尺寸不固定,這個高度110%不好確定。
第二種:使用 object-fit 來解決
直接上**:
不支援video
css:保持畫面的原有比例
#my-video{
object-fit: cover;
object-position: center center;
簡單的demo實現:
解釋下:object-fit
fill: 中文釋義「填充」。預設值。替換內容拉伸填滿整個content box, 不保證保持原有的比例。
contain: 中文釋義「包含」。保持原有尺寸比例。保證替換內容尺寸一定可以在容器裡面放得下。因此,此引數可能會在容器內留下空白。
cover: 中文釋義「覆蓋」。保持原有尺寸比例。保證替換內容尺寸一定大於容器尺寸,寬度和高度至少有乙個和容器一致。因此,此引數可能會讓替換內容(如)部分區域不可見。
none: 中文釋義「無」。保持原有尺寸比例。同時保持替換內容原始尺寸大小。
scale-down: 中文釋義「降低」。就好像依次設定了none或contain, 最終呈現的是尺寸比較小的那個
** 指令碼之家
HTML5在手機遊戲的發展前景
好處 跨平台 無需安裝 我們很看好html5,因為我們相信這它可以幫助開發商節省大量的時間和金錢,將他們從耗時耗財的手機跨平台移植問題中解放出來。通過html5的開放性技術標準,開發商只需要一次性完成遊戲開發,就可以輕鬆地將它移植到支援html5瀏覽器的任何平台中,比如說pc ipad iphone...
HTML5全屏操作API
基本 由於相容性的原因 在ie9以下不支援,但是在高階瀏覽器新版本支援 不同瀏覽器需要新增不同的私有字首 在js中也有私有字首,在方法屬性之前加上即可,並且首字母需大寫 script 將瀏覽器字首相容封裝成函式 function tofullvideo else if videodom.webkit...
手機移動端Html5控制布局
viewport 標記用於指定使用者是否可以縮放web頁面,如果可以,那麼縮放到的最大和最小縮放比例是什麼。使用 viewport 標記還表示文件針對移動裝置進行了優化。viewport 標記的content值 是由指令及其值組成的以逗號分隔的列表。例 width 和height指令分別指定視區的邏...