从纵向变为横向时需要刷新页面 css 移动设备

Question

我有一个网站，当它出现在小型智能 phone（纵向）上时，徽标太大了，我想将其换成较小的图像。

我可以做到没问题并且感觉很聪明但是当下注者拿着phone景观时它returns到大图像，我很高兴这个但是当下注者然后持有phone 肖像较大的图像在刷新页面之前仍然存在。

我该怎么做才能让下注者在 phone 从横向转为纵向后不需要刷新页面。

我在下面附上了我当前的代码片段。它来自 .css 页面。请注意，我也曾尝试将此代码段添加到 .css 页面的前几行代码中，但没有任何区别。图片替换只有10kb左右

/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ -+-+-+-+-+-+-+-+-+-+- */

/* Samsung Galaxy S2 (portrait) ----------- */
@media only screen and (max-device-width: 320px) and (orientation :     portrait) {

.phonenum {
display: none; 
}
.two-column-column1 .hide-logo {
display: none !important;
}
.two-column-column1 {
width:274px; /*width of my new small image image*/
height:74px; /*height of my new small image image*/
background: url(images/londonfabriccompany274-74.png) no-repeat;
margin:0; /* I didn't want no margin */
padding:0; /* I didn't want padding either */
}
.inner-one-columns-wrapper {
margin-top: 6px;
}
}

/* +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+- */

感谢您的输入欢呼

Seemore Yea Baby

Answer 1

您是否尝试过向媒体查询添加景观参数并围绕该媒体查询设置相同的图像要求？

/* 三星 Galaxy S2（纵向）------------ */

@media only screen and (max-device-width: 320px) and (orientation: portrait) {

/** 你的参数在这里 **/ }

然后：

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape){

/** 你的参数在这里 **/

}

从纵向变为横向时需要刷新页面 css 移动设备

Need to refresh page when going from portrait to landscape css Mobile

css

mobile

page-refresh

landscape-portrait