我正在尝试使用HTML / CSS3 / Jquery和JS制作Phonegap应用程序。 我已经制作了一些具有背景图像的div(css嵌入了base-64编码的svg图像)。但是,此背景图像会在设备方向更改时拉伸。 (从肖像到风景)。
我设置了以下css属性:
#top-bar #settings {
background: url(data:image/svg+xml;base64,[image_data]) no-repeat;
background-size: 50% 50%;
background-position: center;
width: 10%;
height: 100%;
position: relative;
float: right;
right: 0;
}
我还发现在我的桌面浏览器或某些其他Android手机中看不到此行为。我的手机(我看到的问题是用Cyanogen 10.1.3植根的Galaxy s3)
有没有办法阻止这种情况发生?我希望背景在任何条件下看起来都一样。
答案 0 :(得分:0)
您似乎对纵向/横向方向使用单一样式,以相对方式引用视口大小。
我会使用媒体查询来检测方向,并根据它定义特定的样式以对背景外观进行微调。
类似(检查实际语法):
@media (orientation: portrait){
#top-bar #settings {
/* Portrait styling */
}
}
@media (orientation: landscape){
#top-bar #settings {
/* Landscape styling */
}
}
希望它有所帮助。
答案 1 :(得分:0)
问题是相关属性。
background-size: 50% 50%;
width: 10%;
height: 100%;
如果屏幕宽度和宽度不同,那些会给你不同的总尺寸。高度在不保持纵横比的情况下发生变化!
只需将背景宽度尺寸保持在50%即可。如果没有设置第二个尺寸,则它具有初始值" auto",它保持图像的纵横比。
background-size: 50%;
这可以解决您的问题。