vue 移动端浏览器全屏展示

你可以使用以下 CSS 样式来让 Vue 移动端应用在浏览器中全屏展示：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
}

这样，`#app` 元素会占据整个浏览器窗口的宽和高，实现全屏展示效果。同时，通过将 `body` 元素的 `margin` 和 `padding` 设为 0，可以避免浏览器默认的页面边距影响全屏展示效果。`overflow: hidden;` 则可以禁止页面滚动，确保用户无法滚动到页面外部。

相关问题

videojs vue 静态source_手把手从零开始封装一个vue移动端视频播放器组件ios播放视频时自动全屏如何取消

在 Video.js 中取消 iOS 播放器自动全屏，可以使用 `playsinline` 属性。该属性告诉 iOS 在原生的 Safari 浏览器中播放视频时不要自动全屏。

在 Vue 组件中，你可以将 `playsinline` 传递给 `video-js` 组件的 `options` 属性，如下所示：

<template>
  <div>
    <video-js ref="videoPlayer" class="vjs-custom-skin" :options="playerOptions" />
  </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    source: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      player: null,
      playerOptions: {
        autoplay: false,
        sources: [{
          src: this.source,
          type: 'video/mp4',
        }],
        controls: true,
        fluid: true,
        playsinline: true, // 取消 iOS 自动全屏
      },
    };
  },
  mounted() {
    this.initPlayer();
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
  methods: {
    initPlayer() {
      this.player = videojs(this.$refs.videoPlayer, this.playerOptions, function onPlayerReady() {
        console.log('Player is ready');
      });
    },
  },
};
</script>

在上面的示例中，我们将 `playsinline` 设置为 `true`，以便在 iOS 上播放时取消自动全屏。