Using 2 viewports depending on the device

Question

Using 2 viewports depending on the device

My website looks great on all devices and desktop, but I want to set a different viewport for iPad. I would like the iPad to have the same width as my desktop version, which is 1100px wide. Currently, the site is designed with percentages and ems up to (max-device-width: 736px), and then it switches to the iPad layout. However, I need to change the viewport for iPad.

I am currently using this code:

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

Although this code works well, I now need to adjust the viewport to content="width=1100". Unfortunately, I cannot simply do this in CSS with @mediaquery without having to make significant changes to other CSS styles.

How can I set a different viewport specifically for the iPad?

css ipad viewport

Answer 1

Answer №1

Make changes to your CSS and include media queries for different screen sizes. Here is a sample code snippet:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* Additional Media Queries for Specific Devices */

Answer 2

Make changes to your CSS and include media queries for different screen sizes. Here is a sample code snippet:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* Additional Media Queries for Specific Devices */

Using 2 viewports depending on the device

Answer №1

Similar questions

Using CSS to create centered blocks

Mysterious area located within a flexbox set to display items in a column arrangement

Turn off hover effect for MUI DataGrid

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

Beginner attempting to comprehend Safari CSS font-size test outcomes

Align two divs to the left and the other one to the right

I attempted to activate the hover effect on a DOM element using JavaScript, but was unsuccessful. It appears that achieving this is not possible. However, I am curious as to how Chrome is able to

Using jQuery to toggle the image of a button based on its id

What is the proper way to showcase thumbnails in different sizes?

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

Jquery animation in Wordpress without any need for scrolling

Customize the text color across all sections of the application in ExtJS 6

iPhone 3GS and 4 not expanding DIVs by 100%

What is the process for using JQuery to switch the class of an element to 'nested-class'?

How can I select the specific element within a class when a particular checkbox is selected?

When the Navbar div is set to Position:fixed, it generates empty space on the page

Exploring the world of colored tab links in CSS

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Tips for including a hyperlink in a collapsible element within a dropdown menu using Bootstrap 5

Is it possible to generate multiple modal windows with similar designs but varying content?