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?

cssipadviewport

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 */

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Text overlapping image causing hover state interference

I'm feeling completely lost right now. My goal is to have the title of each project displayed in the center of the screen when you hover over the respective project images. I've resorted to using jQuery for this because it seems like the most str ...

jquerycssimagetypeshover

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

Divide text to reduce its width within the confines of a specific height on a div element

I've spent the past week scouring various forums, including stackoverflow, but I haven't been able to find a solution. In my responsive website, I'm using CSS flexbox to display dynamic menu items. Sometimes the text can be quite long, and ...

javascriptjqueryhtmlcss

Assign a class to the "li" element containing an "a" tag with the specified href attribute

Is it possible to transform the "href" attribute of an element into a class or id like "li" for better css handling? <ul> <li><a href="#section3"><span class="fp-sr-only">due</span><span></span></a><d ...

jqueryhtmlcss

Shift the checkbox label over to the left with just CSS

I am faced with the following code snippet: <div> <span> <input type="checkbox"> <label>I desire this to appear on the left-hand side</label> </span> </div> My goal is to shift the label to the left side of ...

htmlcsscheckboxlabel

The art of CSS Absolute Positioning and the Science of Body Sc

I'm trying to position an absolute div in the bottom right corner of a page. .absolute{ position: absolute; right:0; bottom: 0; } While this code works, I've noticed that when scrolling the page, the right/bottom position is relative t ...

csscss-position

"Effortless alignment: Centralizing CSS styling across the entire

I need help placing a loading spinner in the center of my screen, ensuring it works on both mobile and desktop devices. Here is my current CSS code: .spinner { width: 100px; height: 100px; position:absolute; top: 50%; left: 50%; margin: 100px ...

htmlcssruby-on-rails-5

Adjust the number of images in each row based on the width of the screen

I have experimented with various methods, but none seem to work flawlessly. My goal is to neatly display around 50 images in rows and columns, adjusting the length of each row based on the screen width. Here are the approaches I've tried: Placing ...

htmlcsstwitter-bootstrap

Evaluating CSS Specificity

Is there a recommended approach for automatically testing css selectors? I am in the process of developing a SCSS framework and I want to integrate automated tests. Specifically, I aim to verify that the css selectors are functioning correctly. For examp ...

cssunit-testingseleniumtestingcss-selectors

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

javascriptjquerycsslayoutmargin

Customizing the size of an SVG shape using CSS properties

I am having trouble adjusting the width of the icon to 100% of the SVG container. This is what I've encountered: And here is the code for the SVG icon <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w ...

htmlcsssvgcss-shapes

Is it possible to develop Hybrid Apps specifically for Windows Tablets/Surface devices?

We have created a Hybrid App for Android devices and made it compatible with Windows by using Adobe PhoneGap Build to generate a .XAP package from the existing Source Code. We believe that this .XAP package can easily be deployed on a Windows Mobile devic ...

androidwindowshtmlcsscordova

I am attempting to properly arrange my navigation links and logo in alignment

I need help aligning the logo in the exact center while keeping the navigation links as they are. Here is how it currently looks: https://i.stack.imgur.com/qOgVJ.jpg My CSS: .logo { display: inline-block; text-align: center; } na ...

htmlcss

Animation of scrolling in a horizontal layout

Currently, I am utilizing ng-repeat 1.4 to dynamically generate elements within a div that has polymer shadow classes and uses the 'layout horizontal' style, resulting in code similar to: <div class='layout horizontal'> < ...

htmlcssangularjspolymerpolymer-1.0

Hide custom video controls from view

For a while, I was able to hide the controls on my page using position:absolute; and bottom:-36px, which made them pop up when hovering over the player. Recently, however, I noticed that I can now scroll down to see them. How can I maintain the slide-up ef ...

htmlcss

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

javascripthtmlcssvue.jsvuejs2

`A mistake occurred while building in the package.json file`

While attempting to run all build processes by using the command npm run build:css, I encountered an error indicated below. Even after running npm cache clean --force, the issue remains unresolved. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm E ...

cssnpm

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

javascriptjqueryhtmlcssclass

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2