Javascript widget style doesn't scale without meta viewport tag
I am creating a widget that will be displayed at the bottom of a webpage. This widget will only be displayed when the user embeds javascript code into their web page.
Basically, I ran into a problem with the stylistic part of the widget. I understand that the widget is displayed differently on the web page with or without the specified metadata tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
A web page with a metatag viewport tag looks just fine. However, a web page without the metadata viewtat looks very small.
I am using .em for my font size.
Below is the code snippet of my style.css
.mywidget li a{
color:#304FFE;
font-size:2.0em;
}
The main problem is that I need my widget (style) to be compatible and seamless with mobile mobile or non mobile mobile web pages.
The expert advice was greatly appreciated. Am I doing it wrong?
Wonder how companies like zopim do!
The chat button looks great even if your site is not mobile optimized. It stays the same size and location, no matter how much you zoom in. No matter what your customers are watching, you are just a chat button.
My current solution (not the best in my opinion, looking for more understanding)
I am using css3 media queries. When I find that the viewport meta tag is not specified, I include and link to my specific css (media).
var viewport = document.querySelector("meta[name=viewport]");
if(viewport === null){
//create my media css element
}
In my media queries, I increased the font size by a few em. for example
@media only screen and (min-width : 320px) {
.mywidget li a {
font-size: 3.5em!important;
}
}
The problem with this solution is that I don't know how many em to increase. I would like the widget to look exactly the same on mobile mobile and non-mobile mobile web page. Any advice is greatly appreciated!
source to share
If you really don't want it to change, you can use px
as value in font-size
. I was looking at the zopimchat widget which I think is what you are talking about on your page.
"We are in the network" has font-size
, defined as font-size: 18px;
Entrance has font-size
, defined asfont-size: 12px;
I looked at both values using Chrome DevTools.
If you need to use em
s, it is helpful to look at the definition of mdn (link to full definition): The
size of the em value is dynamic. When you define the font-size property, the em value is equal to the font size that is applied to the parent of the element in question. If you haven't set the font size anywhere on the page, then this is the default browser, which is probably 16px.
So if you don't define font-size
in .mywidget
, then you are dependent on the web page calling your widget. If you define it there, it li a
inherits from .mywidget
and gives you some control, but you will need to give it a fixed value, which will bring you back to pixels instead of em
s again , somewhere else.
source to share