Reputation: 1283
I am building a widget which will display at the bottom of the webpage. This widget will only be displayed when a user embed javascript code to their webpage.
Basically, i am facing an issue with the styling part of the widget. I realize that the widget display differently on webpage with or without meta viewport tag specified.
<meta name="viewport" content="width=device-width, initial-scale=1">
Webpage with metatag viewport tag looks just fine. However, webpage without the metatag viewport tag looks extremely small.
I am using .em for my font size.
Below is a code snippet of my style.css
.mywidget li a{
color:#304FFE;
font-size:2.0em;
}
The main concern will be that i need my widget (style) to be compatible and seamless with mobile responsive or non-mobile responsive webpages.
Expert advice appreciated greatly. Am i doing it wrong?
I wonder how does companies like zopim does it!
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.
My Current Solution (Not the best in my opinion - looking for more insights)
I make use of css3 media queries. When i detect that no viewport meta tag has been specified, i include and link to my specific css (with media queries).
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. E.g
@media only screen and (min-width : 320px) {
.mywidget li a {
font-size: 3.5em!important;
}
}
The problem with this solution is that i do not know how many em to increase. I would like the widget to look exactly the same in mobile responsive & non mobile responsive webpage. Any advice appreciated greatly!
Upvotes: 3
Views: 226
Reputation: 7190
If you really don't want it to change, you can use px
as the value in font-size
. I was looking into the zopimchat widget, which I think is what you are referring to on their page.
"We're online" has font-size
defined as font-size: 18px;
The input has font-size
defined as font-size: 12px;
I viewed both values using Chrome DevTools.
If you HAVE to use em
s, it's helpful to review mdn's definition (link is to full definition):
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.
So if you are't defining the font-size
at .mywidget
, then you are dependent on the webpage that is calling your widget. If you define it there, then li a
will inherit from .mywidget
and give you some control, but you'd have to give it a fixed value, which again gets you back to pixels instead of em
s, just somewhere else.
Upvotes: 1