mobile - 为移动设备优化 prettyPhoto 灯箱？

Question

我目前正在使用 prettyPhoto在我正在开发的网站上，但在移动设备上遇到了一个小问题。

该插件具有选项“allow_resize: false”，它不允许调整大于视口(viewport)的照片大小，但生成的缩小图像在视口(viewport)宽度的大约 30-35% 处太小了。这在 480 像素宽的屏幕上是个问题，因为图像只使用了可用空间的一小部分。

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

我猜修改原始插件或添加 javascript 会是一个更好的解决方案。有没有人对最好的方法有任何建议？

Answer 1

@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; }

}