javascript - 手机自适应问题
PHP中文网
PHP中文网 2017-04-10 15:44:49
[JavaScript讨论组]

公司要在朋友圈做广告,其中要在H5页面上面加视频,提供的视频比例是16:9,在页面中的要求是自适应的,下图是腾讯的要求

视频呈现在id为WxMomentVideo的p中,呈现方式如下图

因为我们的视频比例为16:9 所以对应的此p的宽和高必须是16:9,虽然视频本身是自适应 但如果宽和高不对应 会存在黑边 如下图显示

视频的上方 由于p高度过高 出现黑边,腾讯是不允许的,身为一个后端人士,当时我是这样想的 使用js获取当前手机屏幕 宽度 减去 左右边距 共40px后 根据比例算出高度 用js写进css中,但这样有些安卓机型 并不适配,虽然问题已经解决,但仍想想分享给大家 看看大家 对此有什么好的解决方案,(说明)腾讯朋友圈是不能引入外部js和css的。

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHP中文网

可以利用css的这个特性,
块级元素padding-top/padding-bottom的值用百分比时,是相对于其宽度计算。
这样就能得到一个长宽比例固定的元素了。

一个简单的示例:
https://jsfiddle.net/w29Ludnf/1/

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号