TailwindCSS无法让VueJS应用在移动端占满全屏如何解决

问题排查与修复方案 #

1. 先检查入口HTML文件的<head>标签内是否配置了正确的viewport标签，移动端适配异常90%的情况都是漏了该配置，正确配置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2. 父容器弹性布局配置错误：Tailwind 中flex-row仅用于设置弹性容器的主轴方向为横向，必须搭配flex类才会真正开启弹性布局，否则所有弹性相关属性都不会生效。

3. 全局样式重置缺失：浏览器默认会给html、body标签添加默认边距，未重置的情况下会挤占元素可用宽度，建议在全局CSS中添加如下重置规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  overflow-x: hidden;
}

4. 宽度单位选择和弹性子元素配置优化：

• 优先用w-full替代w-screen：w-screen取固定视口宽度，会计入纵向滚动条宽度导致横向溢出，w-full会继承父级可用宽度，适配性更强
• 如果需要实现横向滚动的多屏效果，父容器需要添加overflow-x-auto、flex-nowrap开启横向滚动，子元素需要添加flex-shrink-0避免被自动压缩

修改后的组件代码如下：

<template>
<div class="flex flex-row h-screen w-full content-center bg-gray-700 overflow-x-auto flex-nowrap">
  <div class="flex w-full h-5/6 content-center flex-shrink-0" id="splash"> <Splash /></div>
  <div class="flex bg-blue-800 w-full h-5/6 flex-shrink-0" id="skills"> <Skills /></div>
  <div class="flex bg-green-700 w-full h-5/6 flex-shrink-0" id="projects"></div>
  <div class="flex bg-pink-700 w-full h-5/6 flex-shrink-0" id="about"></div>
</div>  
</template>

<script>
import Splash from '../components/Splash.vue';
import Skills from '../components/Skills.vue';

export default {
  name: "Home",
  components: {
    Splash,
    Skills
  },
  data() {
    return {}
  }
}
</script>

内容的提问来源于stack exchange，提问作者Tarek ElShennawy