Search for a command to run...
This is really a server-side solution and not using CSS's media queries
No comments yet. Be the first to comment.
Clean your email list even before sending it to a mass emailing solution like AutoSend to avoid a high bounce rate
Try using an alternative to openclaw, which they claim is cheaper to use
Using types (and interfaces) to define a blueprint of a variable
Using GraphQL as an alternative to REST API for Hashnode
making makemigrations work in Django when migrations is not pushed to git
There was a situation where I need to set the width and height attributes of an image without the CSS, since I was setting the CSS height via TailWindCSS's classnames based on responsiveness - h-9 sm:h-20 - h-9 for mobile view and h-20 for desktop view. Because Setting Height And Width On Images Is Important Again for Google's PageSpeed Insights, I had to set the width and height attributes of the HTML img element on the server side, using PHP.
detectmobilebrowsers has real short insert-able snippets for almost every web language. For PHP, its at http://detectmobilebrowsers.com/download/php
You'll get a 3 line code like below - the regular expression is not included in this post as it's too long.
Include this in your base php file :
<?php
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/this is a very long regular expression/i',substr($useragent,0,4)))
$GLOBALS['isMobile'] = true;
?>
Then, in the HTML file you can set the width and height attributes :
$dimensions = 'width="80" height="80"';
if (isset($GLOBALS['isMobile']) && $GLOBALS['isMobile'])
$dimensions = 'width="36" height="36"';
Now my img tag in my HTML looks like this :
<img class="h-9 sm:h-20" src="https://my-bucket.amazonaws.com/images/my-image.webp" alt="my image" <?php echo $dimensions ?> />
Now Google PageSpeed Insights won't complain of images without dimensions.