As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not.
<meta name="viewport" content="width=device-width, initial-scale=1">
Websites with the viewport tag look good, but those without it make the widget appear very small. To add to this complexity, I use .em for font sizes.
Here's a snippet from my style.css file:
.mywidget li a{
color:#304FFE;
font-size:2.0em;
}
I aim for my widget's style to seamlessly adapt to mobile responsive and non-responsive pages alike. Seeking expert advice on how to achieve this effectively!
Speaking of successful implementation, companies like Zopim handle this flawlessly!
Zopim's chat button maintains its impeccable appearance even on non-mobile optimized websites. It remains constant in size and placement, regardless of zoom level. Your customers can easily connect with you via a consistent chat button experience.
Current Approach (Room for Improvement - open to suggestions)
I resort to using CSS3 media queries by checking if a viewport meta tag is present. If not, I load a specific CSS file with corresponding media queries.
var viewport = document.querySelector("meta[name=viewport]");
if(viewport === null){
//create my media css element
}
In these media queries, I adjust the font size by a few em units. For instance:
@media only screen and (min-width : 320px) {
.mywidget li a {
font-size: 3.5em!important;
}
}
The challenge with this method is determining the precise increase in em units needed. I strive for consistency across both mobile responsive and non-responsive pages. Any insights or tips are highly valued!