gpt4 book ai didi

javascript - jQuery prettyPhoto 移动问题

转载 作者:太空宇宙 更新时间:2023-11-03 23:06:41 26 4
gpt4 key购买 nike

我目前正在一个元素中使用 prettyPhoto。问题出在移动设备上,它不显示全屏。所以我找到了解决方案并应用它。但现在视频不适合窗口。

CSS 修复

/* prettyPhoto styling for small screens */
@media (max-width: 500px)
{
.pp_pic_holder.pp_default
{
width: 100%!important;
margin-top:-100px !important;
left: 0!important;
overflow: hidden;
}
div.pp_default .pp_content_container .pp_left
{
padding-left: 0!important;
}
div.pp_default .pp_content_container .pp_right
{
padding-right: 0!important;
}
.pp_content
{
width: 100%!important;
height: auto!important;
}
.pp_fade
{
width: 100%!important;
height: 100%!important;
}
a.pp_expand,
a.pp_contract,
.pp_hoverContainer,
.pp_gallery,
.pp_top,
.pp_bottom
{
display: none!important;
}
#pp_full_res img
{
width: 100%!important;
height: auto!important;
}
.pp_details
{
box-sizing: border-box;
width: 100%!important;
padding-left: 3%;
padding-right: 4%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
margin-top: -2px!important;
}
a.pp_close
{
right: 10px!important;
top: 10px!important;
}
}

jQuery 漂亮照片插件 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

这在照片上效果很好。但是当加载 YouTube 或 Vimeo 等视频时,视频比打开的窗口小得多。我该如何解决这个问题?

最佳答案

同时为视频添加媒体查询:

@media (max-width: 500px) {
.pp_pic_holder iframe,
.pp_pic_holder object,
.pp_pic_holder embed {
width:100% !important;

}
}

关于javascript - jQuery prettyPhoto 移动问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34509838/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com