如何在PC端和移动端共用同一页面并解决缓存问题？

PC端和移动端共用页面及缓存问题的解决方案

在宝塔面板（nginx+php+mysql）环境下，实现PC端（www.sf.com）和移动端（m.sf.com）共用同一目录下的页面，同时解决开启缓存后链接和样式显示错误的问题，并非易事。 本文提供一种高效简洁的方案。

初始方案尝试使用PHP函数根据域名判断（域名以’m’开头则为移动端）来加载不同的css文件和修改URL，但在开启缓存后，PHP函数无法执行，导致链接失效。

优化方案：使用独立的index.html文件

为了避免PHP函数在缓存机制下失效的问题，建议为PC端和移动端分别创建独立的index.html文件。 www.sf.com对应index.html，m.sf.com对应m.index.html（或其他命名）。 每个index.html文件包含各自的CSS链接和URL，无需依赖PHP动态处理。

此方法的优势在于：

• 简化逻辑: 避免了复杂的PHP判断和URL替换逻辑。
• 缓存友好: 静态HTML文件可以直接被缓存，避免了PHP执行的开销，确保在开启缓存后也能正确显示PC端和移动端的内容。
• 可靠性高: 减少了因PHP代码错误或服务器环境差异导致的页面显示问题。

通过这种方式，可以轻松实现PC端和移动端共用同一目录，并有效解决缓存问题，确保用户在不同设备上都能获得正确的页面显示效果。