javascript - 没有元视口标记，javascript小部件的样式不会缩放

我正在构建一个小部件，它将显示在网页的底部。仅当用户将JavaScript代码嵌入其网页时，才会显示此小组件。

基本上，我面临着小部件样式部分的问题。我意识到窗口小部件在具有或不具有指定的元视口标记的网页上显示不同。

.mywidget li a{
   color:#304FFE;
   font-size:2.0em;
}

带有metatag视口标记的网页看起来很好。但是，没有metatag视口标记的网页看起来非常小。

我使用.em作为我的字体大小。

下面是我的style.css的代码片段

var viewport = document.querySelector("meta[name=viewport]");
if(viewport === null){
      //create my media css element
}

主要关注的是我需要我的小部件（样式）与移动响应或非移动响应网页兼容并且无缝。

专家建议非常受欢迎。我做错了吗？

我想知道像zopim这样的公司是怎么做到的！

https://www.zopim.com/widget

  

即使您的网站未针对移动设备进行优化，聊天按钮仍然看起来很漂亮。无论放大多少，它都保持相同的大小和位置。无论您的客户在看什么，您都只是一个聊天按钮。

我目前的解决方案（我认为不是最好的 - 寻求更多见解）

我使用css3媒体查询。当我检测到没有指定视口元标记时，我包含并链接到我的特定css（带有媒体查询）。

@media only screen and (min-width : 320px) {
 .mywidget li a {
    font-size: 3.5em!important;
  }  

}

在我的媒体查询中，我将字体大小增加了几个em。 E.g

atom.commands.add 'atom-text-editor',
  'user:insert-date': (event) ->
    editor = @getModel()
    editor.insertText(new Date().toLocaleString())

这个解决方案的问题是我不知道要增加多少em。我希望这个小部件在移动响应中看起来完全一样。非移动响应网页。任何建议都非常赞赏！

最佳答案：

1 个答案:

答案 0 :(得分：1)

如果您确实不想更改，可以使用px作为font-size中的值。我正在查看zopimchat小部件，我认为这是他们在页面上引用的内容。

“我们在线”将font-size定义为font-size: 18px; 输入的font-size定义为font-size: 12px;

我使用Chrome DevTools查看了这两个值。

如果您必须使用em，则查看mdn的定义（链接是完整定义）会很有帮助：
The size of an em value is dynamic. When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px.

因此，如果您未在font-size定义.mywidget，那么您将依赖于调用您的小部件的网页。如果你在那里定义它，那么li a将从.mywidget继承并给你一些控制权，但是你必须给它一个固定的值，这又会让你回到像素而不是{{1 s，就在其他地方。