元素时在移动设备

我一直在撕裂我的头发与这一个一整天，所以任何帮助/建议是值得欢迎的感动！元素时在移动设备

基本上，我的新项目采用检测移动浏览器的脚本，以检查用户在移动设备上，如果是禁止正常的样式表，并启用移动式样式表。

我已经设法解决了大部分问题，但由于某些原因，我在其中一个部分的内容滑块出现问题，它在每个幻灯片中都有两个内联元素，一个浮动左边（文本）和一个浮动权（图片）。出于某种原因，当第二张幻灯片被点击时，图片在文本下方向下移动。通常这会发生，如果没有空间，但情况并非如此，因为这两个元素都有足够的空间。

这只是发生在移动设备上，所以你可以看到我的意思去http://beta.residencyradio.com和去功能部分，目前的版本我已经工作是为平板电脑，所以最好看那里。

我的想法是这必须是在这个片段中的移动样式表（见下文）代码的东西做的，但我也不太清楚是什么。

#feat { 
width: 60em; 
margin-top: 3.125em; 
display: inline-block; 
} 

.feat_container { 
width: 23.4375em; 
display: inline-block; 
margin-top: 9.0625em; 
margin-bottom: 9.0625em; 
float: left; 
} 

.feat_container p { 
font-size: 1.125em; 
line-height: 1.2em; 
margin-bottom: 0; 
} 

.feat_logo { 
width: 23.4375em; 
display: inline-block; 
float: right; 
margin: 0; 
} 

#feat_nav { 
float: left; 
display: inline-block; 
} 

#feat_nav a { 
background: url('../images/dot.png') no-repeat; 
font-size: 16px; 
padding-right: 9px; 
text-decoration: none; 
margin-right: 5px; 
color: rgba(1, 1, 1, 0); 
} 

#feat_nav a.activeSlide { 
background: url('../images/dot_active.png') no-repeat; 
} 

#PSM .feat_container { 
margin-top: 8.375em; 
margin-bottom: 8.375em; 
} 

#PSM, #banger, #hot, #eclectic, #definitive, #guest { 
width: 60em; 
} 

#guest .feat_container { 
margin-top: 7.6875em; 
margin-bottom: 7.6875em; 
}

任何帮助都将不胜感激！

感谢，

迈克尔

来源

2012-04-20 Michael

你用某种WSYIWYG编辑使这个？为什么这样具体的'em's？无论如何，我没有移动设备，但我在Android上看到了这种情况，试图检测宽度并自动进行调整。然后它会引发另一次调整，导致在我测试的任何桌面浏览器上不会发生的无限循环。我不知道这是否是你的问题，但它看起来像你做了一些与JS定位。如果可能的话，尝试原始的CSS解决方案。 – Brad 2012-04-20 01:54:46

litterally刚刚才出现，现在花花公子，问题是（对于一些未知的原因）的移动浏览器似乎有渲染与'width'设置为特定值变化的问题。只是把它改成'min-width'，然后整理出来。这种特定ems的原因是将所有内容都按我想要的格式保存到像素中。为什么不使用你可能想知道的像素，简而言之，它使桌面版到平板电脑（最终是移动版）的交叉变得非常轻而易举，同时仍保持几乎相同的布局。 – Michael 2012-04-20 02:25:43

你在开玩笑 - 一个1.5MB的单页！所有的浏览器嗅探！请找一个具有良好的** web **开发技能的人参与您的项目。 – RobG 2012-04-20 02:26:16

好吧，其实我管理的“灯泡时刻”之后摸不着头脑。出于某种原因，移动设备（我在android和ios上测试过）似乎在幻灯片更改时渲染包含元素的宽度时出现问题，从而强制正确地浮动内容。

的修复，简单地改变

#PSM, #banger, #hot, #eclectic, #definitive, #guest { width: 60em; }

到

#PSM, #banger, #hot, #eclectic, #definitive, #guest { max-width: 60em; }

这分拣出来，希望它可以帮助别人！

来源

2012-04-20 02:36:35 Michael

元素时在移动设备

回答

相关问题