2

我正在一个名为“Singular”的Wordpress主题之上建立一个网站：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