1

我想做一些固定位置的东西，除了所有的手机。

像这样：

桌面：

#sidebar{
position:fixed;
width: 200px;
height: auto;
...

和手机：

#sidebar{
position:absolute;
width: 200px;
height: auto;
...

所以我想知道，如果我使用 jquery 或 javascript，比如如果移动：使用绝对位置，如果桌面：使用固定位置，它可能会起作用。

但我不是很擅长编程 javascript 等。我只知道 html 和 css。谁能帮我解决我必须使用的代码？

4

4 回答 4

0

使用 css3，您可以使用以下内容为移动设备指定。

@media only screen and (max-device-width: 480px)
{
    position:absolute;
}
于 2013-06-13T17:45:56.717 回答
0

您可以使用mordernizr 库来检测设备是移动设备还是台式机。它有一种非常干净的做事方式。

基本上，它会html根据设备向您的标签添加类。

no-touch for Desktop和touch for mobile

因此，根据您的 HTML 中定义的类，您可以添加相应的 CSS 定义。

.no-touch #sidebar{
   position:fixed;
   width: 200px;
   height: auto;
   ...

.touch  #sidebar{
    position:absolute;
    width: 200px;
    height: auto;
    ...

否则，您需要检查 navigator.userAgent并检查每个属性，您需要根据这些属性应用类。但是使用这个库让你的生活更轻松，避免了肮脏的黑客攻击。

于 2013-06-13T17:46:04.540 回答
0

我想真正的问题是：我如何检测浏览器是否是移动浏览器？有答案：检测移动浏览器

于 2013-06-13T17:53:46.953 回答
0

您可以使用 JavaScript/jQuery。

这将检查页面是否正在移动浏览器上查看，然后应用必要的更改。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  $("#sidebar").css("position", "absolute");
}

如果您喜欢其他方法，可以检查窗口的高度和宽度：

if(window.innerWidth <= 800 && window.innerHeight <= 600) {
  $("#sidebar").css("position", "absolute");
}
于 2013-06-13T17:54:47.753 回答