在非响应发布者网站上呈现第三方响应内容

时间:2013-10-11 22:32:35

标签: javascript responsive-design

我正在开发第三方应用程序,旨在对将要放置的网站做出响应。此“小部件”将放置在通常无响应的网站上。我正在使用CSS媒体查询来检测屏幕大小,如下所示:

@media only screen and (min-device-width : 320px) and (max-width: 800px) {
  /* STYLES */
}

还检测移动浏览器以启动各种移动特定的JavaScript函数,如下所示:

 var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

 if(isMobile) {
   // Do Something
 }

当我在发布者的网站上测试这些样式和函数时,这些样式和函数非常有效,但是当窗口小部件放置在非响应式网站上时,这些样式和函数不会执行(默认为桌面样式和JS)。我可以让非响应式网站玩得很好的唯一方法是插入以下元标记来限制在发布商页面上缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

理想情况下,我不会限制在发布窗口小部件的非响应式移动网站上缩放浏览器。我有什么办法可以避免添加这个标签吗?

一般情况下,我可以做些什么来确保我的移动专用样式和JS在放置在无响应的发布者网站上时正确运行?

非常感谢你的帮助。

0 个答案:

没有答案