在移动设备上移动的元素答案

【问题标题】：Element moving when on mobile device在移动设备上移动的元素
【发布时间】：2012-04-20 00:49:08
【问题描述】：

我一整天都在用这个来扯头发，所以欢迎任何帮助/建议！

基本上，我的新项目使用检测移动浏览器脚本来检查用户是否在移动设备上，如果是，则禁用普通样式表并启用移动样式表。

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

这仅发生在移动设备上，因此您实际上可以通过转到 http://beta.residencyradio.com 并转到功能部分来了解我的意思，我正在使用的当前版本适用于平板电脑，因此最好在那里查看。

我的想法是，这一定与移动样式表（下）中这段 sn-p 代码中的某些内容有关，但我不太确定是什么。

#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;
}

任何帮助将不胜感激！

谢谢，

迈克尔

【问题讨论】：

你是用某种所见即所得的编辑器制作的吗？为什么这么具体的ems？无论如何，我身上没有移动设备，但我在尝试检测宽度并自动调整时在 Android 上看到了这种情况。然后它会触发另一个调整，导致在我测试过的任何桌面浏览器上都不会发生的无限循环。我不知道这是否是您的问题，但看起来您确实使用 JS 进行了一些定位。如果可能，请尝试原始 CSS 解决方案。
老兄，现在才刚刚得到它，问题是（出于某种未知原因）移动浏览器似乎在将 width 设置为特定值的情况下呈现更改时出现问题。只需将其更改为min-width 即可解决。使用这种特定 em 的原因是将所有内容完全按照我想要的方式保存在我的网格中，以像素为单位。为什么不使用像素，您可能想知道，简而言之，它使从桌面版本到平板电脑（最终是移动）版本的交叉变得轻而易举，同时仍然保持几乎相同的布局。
你在开玩笑 - 一个 1.5mb 的单页！和所有的浏览器嗅探！请让具有良好 web 开发技能的人参与您的项目。
嗯，它仍处于 beta 测试阶段，所以现在的大小不是我主要关心的问题，让它看起来正确才是。单页格式是为了演示视差滚动。几乎所有 1.5mb 都在图像中，需要时可以减少很多。浏览器嗅探是为了摆脱视差元素，因为它们在触摸设备上运行得非常糟糕，嗅探是我的一个快速修复（和一些实验），对于启动，我将重定向到网站的移动版本.

标签： javascript jquery html css

【解决方案1】：

好的，实际上我在“灯泡时刻”之后设法解决了这个问题。出于某种原因，移动设备（我在 android 和 ios 上测试过）似乎在幻灯片更改时呈现包含元素的宽度时出现问题，从而迫使右侧浮动内容向下。

修复，只是改变

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

到

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

这样就解决了，希望对某人有所帮助！

【讨论】：