Mobile 为移动设备优化lightbox的功能？

我目前在一个网站上使用，但在移动设备上遇到了一个小问题

该插件具有“allow_resize:false”选项，该选项不允许调整照片的大小，但缩小后的图像太小，约为视口宽度的30-35%。这是480px宽屏幕上的一个问题，因为图像仅利用了可用空间的一小部分

我要做的是让它重新缩放到大约95%的视口。我已经尝试用css和媒体查询来解决这个问题，但是我遇到了一个问题，当宽度设置为95%时，垂直图像会从页面上消失

我猜修改原始插件或添加javascript将是更好的解决方案。有人对最好的方法有什么建议吗？

试试这个（不是我的代码）：

---

我在pretty photo上遇到了同样的问题，并找到了rafael.dev发布的相同css代码修复。然而，它似乎仍然不太好，因为“上一步”和“下一步”按钮消失了，样式也很奇怪。我认为这个问题是由于计算了调整大小引起的，所以我尝试从js源代码中找到调整大小函数的片段，很容易得到如下解决方案：

我使用的是3.1.6版本，请在第568行找到函数

\u fitToViewport

。 然后再向下滚动一些，您将看到

imageWidth=（windowWidth-200）和<代码>图像高度=（窗口高度-200）

只需减少数量，然后移动视图将变得非常好！！我试着调整了很多次，得到了最合适的数字是38和100。您只需复制以下代码即可替换原始代码：

if(pp_containerWidth > windowWidth - 38){
    imageWidth = (windowWidth - 38);
    imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
    imageHeight = (windowHeight - 100);
    imageWidth = (width/height) * imageHeight;
} else {
    fitting = true;
};

在第580行编辑jquery.prettypto.js，您将发现以下代码：

            if((pp_containerWidth > windowWidth)){
                imageWidth = (windowWidth - 200);
                imageHeight = (height/width) * imageWidth;
            }else if((pp_containerHeight > windowHeight)){
                imageHeight = (windowHeight - 200);
                imageWidth = (width/height) * imageHeight;
            }else{
                fitting = true;
            };

只需将值从200更改为30。我想这对你来说很好。
当我添加这个.pp_hoverContainer{display:block！important；}视频控件不显示时
if(pp_containerWidth > windowWidth - 38){
    imageWidth = (windowWidth - 38);
    imageHeight = (height/width) * imageWidth;
} else if(pp_containerHeight > windowHeight - 100) {
    imageHeight = (windowHeight - 100);
    imageWidth = (width/height) * imageHeight;
} else {
    fitting = true;
};

@media only screen and (max-width: 480px) { 

    .pp_pic_holder.pp_default { width: 90%!important; left: 5%!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 { 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: 7%!important; top: 10px!important; }
    #pp_full_res { padding: 5px !important; }

}

            if((pp_containerWidth > windowWidth)){
                imageWidth = (windowWidth - 200);
                imageHeight = (height/width) * imageWidth;
            }else if((pp_containerHeight > windowHeight)){
                imageHeight = (windowHeight - 200);
                imageWidth = (width/height) * imageHeight;
            }else{
                fitting = true;
            };