10

現在、作業中のサイトで prettyPhotoを使用していますが、モバイル デバイスで小さな問題が発生しました。

プラグインには「allow_resize: false」オプションがあり、ビューポートよりも大きな写真のサイズ変更を許可しませんが、縮小された画像はビューポート幅の約 30 ～ 35% で小さすぎます。これは、480px 幅の画面では問題です。画像は使用可能なスペースの一部しか使用していないためです。

私がやろうとしているのは、ビューポートの約 95% に再スケーリングすることです。css とメディア クエリを使用してこれを修正しようとしましたが、幅が 95% に設定されていると、縦方向の画像がページからはみ出すという問題が発生します。

元のプラグインを変更するか、javascript を追加することがより良い解決策になると思います。これを行うための最良の方法について何か提案はありますか?

4

5 に答える 5

19

これを試してください（私のコードではありません）：

/* 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;
    }
}
于 2013-10-29T19:00:59.290 に答える
9

私はかなりの写真で同じ問題を抱えており、rafael.dev によって投稿されたものと同じ css コードの修正を見つけました。ただし、前と次のボタンが消え、スタイルが本当に変なので、まだあまり良くないようです。サイズ変更の計算が原因で問題が発生したと思うので、jsソースからサイズ変更関数のスニペットを見つけようとすると、次のように簡単に解決できました。

私は 3.1.6 バージョンを使用しています_fitToViewport。568 行目の関数を見つけてください。さらに下にスクロールするimageWidth = (windowWidth - 200);と、imageHeight = (windowHeight - 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;
};
于 2015-07-16T13:46:43.410 に答える
1 
@media only screen and (max-width: 480px) { 

        *[class~=pp_pic_holder] { width: 100% !important; left: 0px !important; }  
        *[class~=pp_hoverContainer] { width: 90% !important; height: 180px !important;  }  
        *[class~=pp_fade] { width: 389px !important;  } 
        *[class~=pp_hoverContainer] { height: 190px !important;  }   
        *[class~=pp_right] { height: 220px !important;  }   
        *[class~=pp_content]  { height: 100% !important; width: 320px !important; }  
        #fullResImage { height: 100% !important; width: 320px !important; }  

}
于 2015-03-29T09:36:35.877 に答える