I have conditionals, when page width is < x size. BUT IPad is always bigger than the conditionals but the ratios mess everything up when I have object set and the height of the window. I cannot seem to get a conditionals that handles the ratios of ipads and tablets. Any advice?
I would need a better understanding of what you’re trying to size specifically, but iPad has a lot of different models and sizes. I would avoid conditionals based on every case, and rethink your approach to resizing ratios so specifically, if possible, only accounting for major page break sizes (desktop, tablet, phone).
One example, I have a side navigation and when the page width is < 1200, the navigation just uses icons instead of text or full words. But on ipad, it doesn’t shrink even though the objects on the page are pushing up against it and falling to a second row due to min width. But on computers, it shrinks fine when needed.
On an iPad 10th gen (10.9") in portrait mode, Safari’s browser viewport width reports as 820px. In landscape, it’s roughly 1180px. So any CSS breakpoint below 820px (portrait) or 1180px (landscape) should trigger; anything above that will not.
You can also adjust the responsive settings of your menu items so they don’t fall to a second line by increasing the min-width.