Optional HTML content based on screen resolution - mobiles and high resolution desktops

Displaying optional content for high resolution or mobile users on your web page

The W3C Media Queries provide a great opportunity to display a webpage content differently based on the capabilities of the user’s browser or machine.
This can be especially useful for mobile browsers or variable screen width/resolution.

Many webpages do not care at all if you have a high resolution screen, the content will stay static and will just waste the extra space on your monitor –as two wide white columns on the left and right.

However, without any special programming we can provide extra, non essential but useful content to the users with a decent resolution (or remove these for mobile devices).

If we want to target a specific resolution, we can address them using the following CSS media query:

@media only screen and ( max-width : 600px) {
/* CSS styles here*/
}

These styles will only apply on the users screen if the browser window size is maximum 600 pixels – meaning probably on small handheld devices or on any desktop where the browser window is sized quite small.

If we want to query the physical resolution and ignore the actual screen size, we can simply use the following:

@media only screen and ( max-device-width : 600px) {
/* CSS styles here*/
}

In this case, regardless how big the browser window is, these style will only target the lower resolution screens.

Using this simple technique, we can easily create a mobile/simple desktop version of our site just by removing extra elements from the screen, giving it a different menu and increasing the font size a bit:

@media only screen and ( max-width : 600px) {
 body {
  font-size: 20px;
 }
 .header {
  display: none;
 }
 .middle,.right {
  display: none;
 }
}

@media only screen and ( min-width : 601px) {
 body {
  font-size: 15px;
 }
 .header-mobile {
  display: none;
 }
}

And the HTML page itself: 

<body>
 <div class='header'>Header content, yay</div>
 <div class='header-mobile'>Mobile header, yay</div>
 <div class='left content'>This is the static left content</div>
 <div class='middle content'>This is the optional middle content</div>
 <div class='right content'>This is some other extra</div>
 <div class='clear content'></div>
</body>
Mobile CSS applied - no extra content

Desktop CSS applied - two extra columns


In the example above, we simply hide the middle and right extra content while replacing the standard menu with a mobile menu.

This approach is extremely easy to follow, there is no need to develop a different mobile site we can simply fine-tune the content as we go.

It is important to note, that while there is a media query for handheld device property, many of the smartphones (including iOS/iPhone) will ignore the following:

@media handheld {
...
}

The reasoning is that the Apple iPhone is an advanced device so it does not need a special mobile version of the site, it will display the original content perfectly. Still, we can use the physical resolution of the screen. However, we still can use the screen density (DPI) to show different content:

@media (min-resolution: 300dpi)
{
…
}


A desktop monitor has got a resolution of about 90DPI while the new mobile devices (like iPhone 4S, the Samsung Galaxy S III, or the ‘new iPad’) are around 300DPI.



For a list of resolution of different handheld and desktop devices, head to the Wikipedia (http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density).





For all the W3C Media Queries, go to the W3C site (http://www.w3.org/TR/css3-mediaqueries)












































Comments











Post a Comment



















Popular posts from this blog









MurMurHash3, an ultra fast hash algorithm for C# / .NET




















Image







  Finding good hash functions for larger data sets is always challenging. The well know hashes, such as MD5, SHA1, SHA256 are fairly slow with large data processing and their added extra functions (such as being cryptographic hashes) isn’t always required either.   Performance and low collision rate on the other hand is very important, so many new hash functions were inverted in the past few years. One of the most notable ones is MurMurHash3, which is an improved version of its predecessor (v2). The new version can create both 32 bit and 128 bit hash values, making it suitable for a wide range of applications.   64 bit architecture   The 32 bit hash isn’t too important for large amount of data matching, so I only worked with and tested the 128 bit version. The latter one is optimized for x86-64 architecture, giving amazing speeds for data processing. As a 128 bit value consists of two 64 integers, the processor is fairly good with working with such large hash values – they are not byte








. . .

Read more » 












ESP32 - send a push notification from the Arduino ESP32 device to your phone




















Image







Sending a push notification to your phone from an event from an ESP32 is simple. What you'll need (if you are using a Mac for development): Arduino IDE Arduino for ESP32 Serial port simulator for ESP32  to upload your code to the board Wifi network IFTTT account IFTTT app on your phone Wifi network that your ESP32 board can access Architecture Create an IFTTT applet This should read something like this: If Maker Event "notification", then Send a notification from the IFTTT app Change the notification template Go to the settings of your new IFTTT applet and change the template to include "Value1", like this: Get your Webhook endpoint in IFTTT On your applet, click the triangle looking thing (webhook), then Settings, or simply go to this URL  https://ifttt.com/maker_webhooks/settings   Visit the private URL in your browser, replace the trigger name with "notification", so it reads like ...trigger/notification/ with/... and in the Value1  field type in a 








. . .

Read more » 












Octoprint as a systemd service - running it with high priority




















Image







Octoprint provides remote access to your 3D printer, and as it's written in Python, you can run it on practically any operating system. If you are using a standard Raspberry PI image (for instance, because you run it on an Orange PI ), rather than the customised Octoprint image, you can manually install it and create a systemd  service to run it: Add this to /etc/systemd/system/octoprint.service   [Unit] Description=Octoprint After=network.target  [Service] ExecStart=/home/pi/octoprint/bin/octoprint serve WorkingDirectory=/home/pi/octoprint StandardOutput=inherit StandardError=inherit Restart=always User=pi CPUSchedulingPolicy=rr CPUSchedulingPriority=80  [Install] WantedBy=multi-user.target  Then run  sudo systemctl daemon-reload sudo systemctl enable octoprint  This will start Octoprint on every reboot with a high priority (so unlikely to stutter during printing).








. . .

Read more »