大屏幕现场活动页面-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangbw2016/article/details/73161058

本文介绍了如何处理大屏幕现场活动页面的适配问题，包括使用JavaScript根据设备比例调整页面缩放，设置CSS样式确保内容完整显示，以及处理背景图片平铺。此外，讨论了逻辑处理，如用户交互和后台信息传递，并分享了实际项目的经验，强调设计稿比例与现场屏幕比例的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

1.脚本：

使用下方代码，来进行比例缩放

//缩放比例
if(/Android (\d+\.\d+)/.test(navigator.userAgent)){
var version = parseFloat(RegExp.$1);
if(version>2.3){
var phoneScale = parseInt(window.screen.width)/750;
document.write('<meta name="viewport" content="width=750, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi">');
}
}else{
document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">');
}

2.样式：

最外层

body{height:100%;添加background-color，与设计稿的底色一样}

下层div{position:relative;宽高按照设计稿尺寸设置;margin:0 auto;overflow:hidden;}

配置各个模块样式即可

PS：background-size:cover;(背景图平铺)

例子：

/*全站通用样式*/
html,body { height:100%; }
body.page-pc { background:#2387f8; }
.pageWrap { position:relative; width:1024px; height:768px; margin:0 auto; overflow:hidden; }

/*第一页*/
.page1{position:relative; width:100%; height:100%; margin:0 auto; background:url(../images/bg.jpg) no-repeat center; background-size:cover;}
.page1 .btn{position:absolute; top:164px; right:52px;width: 138px;height:138px;cursor:pointer;}

/*第二页*/
.page2{position:relative; width:100%; height:100%; margin:0 auto; background:url(../images/bg2.jpg) no-repeat center; background-size:cover;}
.page2 span{display:block; width:50px; height:80px; line-height: 80px; position: absolute; top:50%; left:50%; margin-top:-75px; margin-left: -60px; font-size: 100px; color:#fcf02a; text-align: center;}

3.逻辑：

手机页面进行动作，如：填写用户信息，点赞等等

后台进行信息获取后，跳转页面，

将信息ajax传回页面上显示

以下即为最近刚做的大屏幕项目的效果

ps:

稿的宽度是750px。

因为给的设计稿比例是4:3，

所以按照4:3做的，

但是现场的屏幕是16:9的，还好做了底色填充才没有穿帮，

如果最开始设计稿就按照16:9设计的话效果会更好