【问题标题】:jquery mobile theme scalingjquery 移动主题缩放
【发布时间】:2012-07-20 17:45:13
【问题描述】:

我正在寻找如何使用 jquery mobile 缩放主题(读取页眉、页脚、输入等)的最佳方法,

假设我有这个高度约为 90 像素的标题,它在 iphone4 上看起来很棒,在我的 galaxy s 上看起来还不错,但是3g/3gs 和分辨率较低的 Android 手机上它会非常大。

我可能会使用媒体查询,但这就像无数次编码整个事情以使其在每个主要使用的分辨率上看起来都正确,考虑到我必须为每个可能的元素和内容手动设置高度我'会加的。。

或者我可以将它保留在http://jquerymobile.com/demos/1.0b2/docs/pages/page-template.html 上,但考虑到我不只使用渐变,而是为 iphone4 分辨率(即 90px 标题)设计的实际图形,它看起来不太好,按比例缩小这么多

或者我可能会使用 em,但这并不完全可行,percents..

还有其他方法吗?也许是一些最佳实践?应用程序的设计如下。提前致谢。

【问题讨论】:

  • 重写所有图像标签 src 以在页面加载时动态具有低分辨率版本?使用 url 正则表达式匹配识别潜在图像。
  • 根本不会有图片,都是带背景的dom元素,我可以用css3的background-size,不过还是一样的问题,要设置几十次所有不同的分辨率..
  • 您可以使用 CSS 类 ID 检测这些背景,然后使用 document.ready 上的样式属性设置低分辨率版本?
  • 这和使用媒体查询一样,只是不那么优雅,我仍然需要手动设置每个元素的高度和宽度 可能的主要决议
  • 不,您可以在 Javascript 中自动计算高度,并根据计算选择图像/设置宽度和高度。

标签: jquery html css jquery-mobile media-queries


【解决方案1】:

对于 iphone 4/4s 图像在您的图像后面放置 @2x,iphone 4 将自动检测这些图像,对于 iphone 3g/3gs 使图像更小。例如,你有一个 iphone 4 的图像,它的 100 x 100 像素你命名为:image1@2x.png,对于 iphone 3gs,你将它设置为 50 x 50,然后将其命名为 image1.png。如果你在 Photoshop 中设计总是使用形状图层。所以你可以缩小规模。希望这会有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-01
    相关资源
    最近更新 更多