共计 1127 个字符，预计需要花费 3 分钟才能阅读完成。
要实现在电脑端显示一个页面，在手机端显示另一个页面，可以使用媒体查询和 JavaScript 来实现。下面是一个简单的实现方法：
在 HTML 文件中，添加一个
/* 电脑端样式 */ @media screen and (min-width: 768px) {body { font-size: 16px;} #content {width: 800px; height: 600px; margin: 0 auto; background-color: #fff; /* 在电脑端显示的页面 */ background-image: url(‘computer-page.png’); background-repeat: no-repeat; background-position: center center; background-size: contain; } } /* 手机端样式 */ @media screen and (max-width: 767px) {body { font-size: 14px;} #content {width: 100%; height: 100%; background-color: #fff; /* 在手机端显示的页面 */ background-image: url(‘mobile-page.png’); background-repeat: no-repeat; background-position: center center; background-size: contain; } }
在上面的代码中，媒体查询 @media 分别设置了电脑端和手机端的样式。在电脑端，使用 background-image 属性将
var content = document.getElementById(‘content’); if (window.innerWidth < 768) {// 在手机端显示的页面 content.style.backgroundImage = ‘url(mobile-page.png)’; } else {// 在电脑端显示的页面 content.style.backgroundImage = ‘url(computer-page.png)’; }
在上面的代码中，使用 window.innerWidth 获取屏幕的宽度，根据宽度的大小来选择显示的页面。
综上所述，可以使用媒体查询和 JavaScript 来实现在电脑端显示一个页面，在手机端显示另一个页面。需要注意的是，这种方法可能会影响 SEO 和用户体验，需要谨慎考虑其使用场景和影响。
