0

我对 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>

任何帮助表示赞赏。我试过自己弄清楚，但我遇到了障碍。

如果您有更好的、完全独立的解决方案，也欢迎您这样做。

4

5 回答 5

3

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

$(document).ready(function() {
  // Code here
});
于 2012-06-08T21:34:52.373 回答
1

我认为你的问题是在加载 DOM（HTML）并准备好操作之前执行 javascript。该代码必须在窗口onload事件触发后触发。像往常一样，我建议使用 jQuery 库，但我将给出一个不使用它的示例，这样您就不需要包含它 - 您只需要注意没有其他 javascript 需要事件触发时运行；它很容易意外地覆盖它。

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

在这里查看 http://jsfiddle.net/vmuX8/1/

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

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

于 2012-06-08T21:36:09.103 回答
1

您需要确保调用脚本 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>
于 2012-06-08T21:39:07.733 回答
1

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

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

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

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

你使用 CSS 来做这件事；它看起来像这样：

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

基本上，如果屏幕尺寸在 0px 到 480px 之间，id 为 mobile 的元素是隐藏的；否则它是可见的。

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

这里有大量使用这种方法的网站：http: //mediaqueri.es/

于 2012-06-08T21:43:16.283 回答
0

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

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

于 2012-06-08T21:32:30.587 回答