CODEWITHSUNDEEP
javascriptjquerycsswidget
Slay
Slay

Reputation: 1283

Style of javascript widget does not scale without meta viewport tag

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!

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.

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

Answers (1)

Jason Lydon
Jason Lydon

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 ems, 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 ems, just somewhere else.

Upvotes: 1

Related Questions