从移动设备上查看网站时,文字会脱节

时间:2012-07-18 13:40:03

标签: html css mobile text-alignment fluid-dynamics

我最近为我的第一批客户鞭打了这个网站。目前,我似乎无法找到从移动设备浏览时每个标题下的文字略微向左的原因。 (使用galaxy nexus)

http://www.digitalgenesis.com.au/2012-websites/qsoils/example3.html

页面上的其他所有内容都完美显示,我一直试图找出问题但没有成功

我希望栗色标题下的文字以其整个宽度显示,这是整个包装容器的60%,文本也应该与栗色线相关,就像在正常的屏幕尺寸上一样。信息标签已获得保证金:0自动;属性

任何帮助都会受到赞赏,即使它不是设计的致命错误,干杯

2 个答案:

答案 0 :(得分:1)

我很确定这种行为是设计的。虽然我的nexus上的chrome比股票浏览器做得好得多。

可能的解决方案是为不同的屏幕尺寸提供不同的CSS规则,例如

@media screen and ( max-width: 480px) {
  #truck img {
    width: 460px;
  }
  .info {
    width: auto;
  }
  /* etc... */
}

并且限制了元素的宽度,否则会强制页面渲染比通常的手机屏幕宽度(纵向)更宽

另一个选项是使用具有线性化支持的CSS框架,如YAML并重建设计。或者可能是两者的结合,因为无论如何图像都需要特别小心。

另请注意,由于移动设备外形小巧,应避免使用大量边距。

答案 1 :(得分:0)

尝试提供段落{text-align:justify;},看看它是否有助于减少移动浏览器中的正确间距问题。