Must-See Web Design for iPad! Easy Steps to Set Minimum Viewport Width with viewport-extra.js

Here’s a useful web development tip, especially for optimizing your site for iPad users. Why is this important? Because iPad usage is increasing every year, and many users browse websites on their iPads. Therefore, it’s crucial to provide an optimal browsing experience for them.

This article explains how to set a minimum viewport width specifically for iPad access using viewport-extra.js.

Importance of Viewport Settings for iPad

When browsing websites on an iPad, the display often appears smaller compared to smartphones due to the larger screen size. To address this issue, we configure iPad-specific viewport settings. Here, we introduce a CSS method that sets a minimum viewport width only when accessed via iPad.

Setting Viewport with CSS

First, let’s go over the CSS code that sets a minimum viewport width only when accessed via iPad. In this example, when the browser width is 768px (iPad size), we apply min-width: 1000px to the body tag. This prevents the page from displaying too small on an iPad.

<style type="text/css">
body{
    text-align: center;
    margin: 0;
    padding: 0;
}
h1{
  text-align: center;
  font-size: 32px;
  padding: 20px 0;
  line-height: 1.4em;
}
.wrap {
    background-color: #cccccc;
}
@media (min-width: 768px) {
    body {
        min-width: 1000px;
    }
}
</style>

Additional Settings in HTML

Here’s how to configure HTML. It’s important to define the default viewport setting using the meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

*Modify as needed.

<div class="wrap">
<h1>How to Set Minimum Viewport Width Only When Accessed from iPad</h1>
</div>

How to Use JavaScript with viewport-extra.js to Set Minimum Viewport Width for iPad

Next, we’ll show how to use JavaScript. This involves enhancing the default meta viewport settings using JavaScript. By using the viewport-extra.js library, you can detect iPad access and customize the viewport as needed.

Load the viewport-extra.min.js file. Then determine whether the device accessing the page is an iPad (tablet), and if so, set ViewportExtra.setContent({ minWidth: 1000 }).

<script src="viewport-extra.min.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Determine if the device is a tablet
    var ua = navigator.userAgent
    var isSmartPhone = ua.indexOf('iPhone') > -1 ||
        (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1)
    var isTablet = !isSmartPhone && (
        ua.indexOf('iPad') > -1 ||
        (ua.indexOf('Macintosh') > -1 && 'ontouchend' in document) ||
        ua.indexOf('Android') > -1
    )
    // Apply minimum width only for tablets
    if (isTablet) ViewportExtra.setContent({ minWidth: 1000 })
})
</script>

Demo Page: Set Minimum Viewport Width Only for iPad Using viewport-extra.js

To demonstrate how this works in practice, we’ve prepared a demo page. Please visit the link below to experience the difference between iPad and other devices.

Demo Page: Set Minimum Viewport Width Only for iPad Using viewport-extra.js

Source: Easy Shrinking Display with Viewport Extra

For more detailed information about this technique, refer to the link below. This site provides in-depth knowledge on customizing the viewport.

Even for Shrinking Desktop Design on iPad! Easy Shrinking Display with Viewport Extra

Conclusion

Offering a website optimized for iPad users is crucial for improving user satisfaction. Use the techniques introduced here to provide your visitors with a more comfortable browsing experience.

*Use at your own risk.
Do not reuse the Google Analytics tag in the demo page’s head section.