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

Question

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

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

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

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

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

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

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

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

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

不知道像zopim这样的公司是怎么做到的!

https://www.zopim.com/widget

The chat button looks gorgeous even if your website isn't mobile optimized. It stays the same size and in the same place, regardless of how much you zoom. No matter what your customers are looking at, you are just a chat button away.

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

我使用 css3 媒体查询。当我检测到没有指定视口(viewport)元标记时，我包含并链接到我的特定 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 小部件，我认为这就是您在他们的页面上所指的内容。

“We're online”的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.

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