Question

早上好，我做了一个facebook应用程序，在后台运行一个简单的php页面。链接是apps.facebook.com/wai-yuen-tong（不要理解语言，即使我不知道）。

情景是 -
1）完整的应用程序是使用ajax。只有一页，整个过程使用ajax 2）页面的高度取决于背景的高度，而与页面上的元素无关。高度根据背景图像的宽度计算，以保持纵横比。元素需要准确地放置在需要的背景上。

我制作了这个应用程序，它适用于桌面版。因为我们知道facebook app的iframe是810px。因此，可以根据页面上需要的位置给予元素绝对位置。

但问题出现在我在移动设备上使用此应用时。在移动设备上没有固定的宽度。页面需要根据设备的宽度进行响应。（高度自动设置以保持背景图像的宽高比。）因此，为了使页面响应（元素根据高度和宽度调整）我使用百分比系统。这就是所有问题开始的地方。我知道％只是根据宽度计算而不考虑高度。例如，margin-top：10％和margin-left：20％两者都将根据页面宽度计算 1）如果我在一个宽高比屏幕上使用chrome制作页面。在移动时。宽高比改变。背景重新调整但元素不合适，因为％仍然是根据宽度计算的 2）应用程序在safari，chrome等上的渲染方式不同 3）将手机从纵向切换到横向也会破坏格式化。

思想解决方案。
1）我想过使用脚本来改变元素的位置。但那需要我把整个css写在脚本中，这是不敏感的 2）我想过要使用媒体集，但我应该使用多少，因为那里会有很多不同的分辨率 3）我想在我的脚本中根据高度计算％并将其分配给元素，但即使应用程序中的背景也在不同的页面上进行更改。
4）使用不同的样式表会有帮助吗？

请帮我选择应该用什么方法来解决这个问题。这件事真的搞砸了我。

Answer 1

只是一个想法，但为什么不使用 CSS媒体标记来定位不同的屏幕尺寸并相应地更新您的CSS。

使用媒体标签，您将能够定位屏幕方向和手机。

以前的Stack AQ，我认为相关。

CSS media queries for screen sizes

这里有一些代码

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

HTML在不同的浏览器和设备上呈现方式不同

1 个答案: