0

大家早上好，我已经制作了一个在后台运行一个简单的 php 页面的 facebook 应用程序。链接是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) 使用不同的样式表会有帮助吗？？？

请帮助我选择我应该使用什么方法来解决这个问题。这件事真让我操心。

4

1 回答 1

1

Just a thought, but why dont you uses CSS Media tags to target different screen sizes and update your CSS accordingly.

Using media tags you will be able to target screen orientation and mobile phones.

Heres a previous Stack AQ that i though relevant.

CSS media queries for screen sizes

here's some code

/* 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 */
}
于 2013-08-27T05:47:48.923 回答