Question

对于Javascript，我基本上什么都不知道，所以任何帮助都表示赞赏。

当用户在手机上时，我想要一个div来弹出一个链接到我的移动网站。当然，我不希望弹出窗口显示用户何时在桌面上。

我的问题是我无法使用javascript来应用css。

这是我正在使用的javascript。

<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

if(isMobile){
document.getElementById('mobile').style.display = 'block';
}
else{
document.getElementById('mobile').style.display = 'none';
}
;

</script>

这是div：

<div id="mobile" style="left:116px; position: absolute; top: 106px;">
If you would like to visit our mobile website optimized for your device, click <a href="http://m.website.org">here</a>.</div>

感谢任何帮助。我已经尝试过把它搞清楚了，但是我遇到了障碍。

如果你有一个更好的，完全独立的解决方案，那也是受欢迎的。

Answer 1

您需要在加载DOM后应用样式。我建议使用jQuery's ready()。

$(document).ready(function() {
  // Code here
});

Answer 2

我认为你的问题是，在加载DOM（HTML）并准备好进行操作之前，javascript正在执行。在窗口的onload事件触发后，该代码必须触发。像往常一样，我建议使用jQuery库，但我会给出一个不使用它的示例，因此您不需要包含它 - 您只需要小心，没有其他需要的JavaScript当事件发生时被碾跑;很容易意外地改写它。

另外，我建议默认隐藏div，并在需要时使用JS显示它。

在此处查看 http://jsfiddle.net/vmuX8/1/

此脚本可以安全地与同一页面上的其他脚本一起使用。

在我的示例中，我声明了一个匿名（无名）函数，该函数在声明后立即运行。那就是将变量放在其中，以便不会影响全局变量（window.onload函数除外）。

Answer 3

您需要确保调用脚本onDOMReady / onLoad或将其放在div之后，否则在调用脚本时div可能不存在。

例如

<script type="text/javascript">

    function add_e_handler(obj, e, func){
        //test if func exists - prevents problems in IE
        if(typeof func != "undefined"){     
            if(obj.attachEvent){
                 obj.attachEvent('on' + e, func);
            }else if(obj.addEventListener){
                obj.addEventListener(e, func, false);
            }else{
                obj['on' + e] = func;
            }
       }
    }

    add_e_handler(window,'load'function(){
        var isMobile = navigator.userAgent.match(/(iPhone|iPod|blackberry|android 0.5|htc|lg|midp|mmp|mobile|nokia|opera mini|palm|pocket|psp|sgh|smartphone|symbian|treo mini|Playstation Portable|SonyEricsson|Samsung|MobileExplorer|PalmSource|Benq|Windows Phone|Windows Mobile|IEMobile|Windows CE|Nintendo Wii)/i);

        if(isMobile){
            document.getElementById('mobile').style.display = 'block';
        }else{
            document.getElementById('mobile').style.display = 'none';
        }
    });

</script>

Answer 4

虽然搜索特定的用户代理可能会让您实现目前的目标，但我会建议不要这样做，原因如下：

不同的设备可能共享相同的用户代理（例如Blackberry，Android，HTC等），这可能意味着不同的屏幕分辨率和比率
即使在具有一致浏览器的一致设备上，横向和纵向之间的差异也会影响网站的布局
未经手动更新无法解决未来的设备和浏览器技术

所有这些都可能导致交付不适合该设备的网站。

我建议使用媒体查询根据视口大小而不是用户字符串调整页面上的元素。这通常被称为自适应设计（你可以说它也包含responsive design）。

你用CSS做到这一点;它看起来像这样：

@media screen and (min-width: 0px) and (max-width: 480px) {
    #mobile {
        display: none;
    }
}

基本上，如果屏幕大小在0px和480px之间，则隐藏具有移动ID的元素;否则它是可见的。

以下是各种移动设备的标准化媒体查询：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

这里有一个很好的网站集合使用这种方法：http://mediaqueri.es/

Answer 5

您是否曾尝试通过document.write（）或其他方式检查您的检测是否正确？

我建议您使用分类程序库来检测设备是否可移动：https://github.com/skookum/categorizr.js#readme

使用Javascript If / Else语句更改CSS值

5 个答案: