javascript 小部件的样式在没有元视口标记的情况下无法缩放

Question

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

基本上，我遇到了小部件样式部分的问题。我意识到在指定或不指定元视口标签的网页上，小部件的显示方式不同。

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

下面是我的 style.css 的代码 sn-p

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

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

非常感谢专家的建议。我做错了吗？

我想知道像 zopim 这样的公司是如何做到的！

https://www.zopim.com/widget

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

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

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

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

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

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

}

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

Answer 1

如果你真的不希望它改变，你可以使用px作为font-size中的值。我正在研究 zopimchat 小部件，我认为这就是您在他们的页面上所指的。

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

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

如果您必须使用ems，查看 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.

因此，如果您没有在.mywidget 处定义font-size，那么您将依赖于调用您的小部件的网页。如果你在那里定义它，那么li a 将从.mywidget 继承并给你一些控制，但你必须给它一个固定值，这再次让你回到像素而不是ems，就在某个地方否则。