2

「Singular」と呼ばれるWordpressテーマの上にWebサイトを構築しています：Singular demo here

Android のデフォルト ブラウザ、少なくとも Jelly Bean 4.1 を搭載した Galaxy SII では、ロゴ イメージが不均衡にスケーリングされることに気付きました。画像の幅は正しいようですが、高さが高すぎます。ロゴがつぶれて見えます。これは私の変更には関係ないようですが、デモ サイトでも発生します。テーマ提供者にメールしたのですが、締め切りが迫っているので、自分でも解決策を見つけようとしています。

これは Android の既知のバグなのか、それとも Singular テーマに特に関係があるのだろうか?

元のコードでは特別なことは何も行われていないようです:

<body<?php ct_body_id('top'); ?> <?php body_class(); ?>>

    <header>
        <div class="container">
            <?php if($ct_options['ct_text_logo'] == "Yes") { ?>
                <div id="logo" class="content-fade">
                    <h2><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h2>
                </div>
            <?php } else { ?>
                <?php if($ct_options['ct_logo']) { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo $ct_options['ct_logo']; ?>" alt="<?php bloginfo('name'); ?>" /></a>
                <?php } else { ?>
                    <a href="<?php echo home_url(); ?>"><img id="logo" class="content-fade" src="<?php echo get_template_directory_uri(); ?>/images/singular-logo.png" alt="WP Singular, a WordPress theme by Contempo" /></a>
                <?php } ?>
            <?php } ?>

正しい高さと幅のプロパティを img タグにハードコーディングしようとしましたが、問題は解決しませんでした。次に何を試せばよいかわかりません。何か案は？

更新: free3dom に感謝します。Safari の Web Inspector によると、その img タグに適用されたスタイルの最終結果は次のとおりです。

-webkit-animation-delay: 0.5s;
-webkit-animation-direction: normal;
-webkit-animation-duration: 0.6000000238418579s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: fadein;
-webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
-webkit-font-smoothing: antialiased;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0s;
-webkit-transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
background-attachment: scroll;
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
color: rgb(17, 158, 158);
cursor: auto;
display: block;
float: left;
font-family: 'Open Sans';
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 20px;
line-height: 28px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-width: 100%;
opacity: 1;
outline-color: rgb(17, 158, 158);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
text-decoration: none;
top: 2px;
vertical-align: baseline;
width: 174px;

幅は定義されていますが、高さは定義されていません。Android ブラウザは正しい高さを自動的に計算しませんか? ただし、以前に幅と高さの値をハードコーディングしても、問題は解決されなかったようです。完全に確認するために再確認した方がよいでしょう。

それ以外に、目を引くものはありますか？問題の原因が明らかなものは見つかりませんでした。

画面キャプチャ

4

0 に答える 0