CSS layout with percentage values breaks when viewed on iPad

Currently, I am in the process of developing a website according to a client's requirements. The site works perfectly on OSX Safari, Firefox, and Chrome but has not been tested on PC yet. However, it breaks quickly when accessed on an iPad and is completely dysfunctional on an iPhone.

You can view the current version of the site here:

Each element on the site is sized as a percentage of the window height because the client prefers sites that scale to fit the window size, resulting in larger images. When viewed on an iPad in landscape mode, clicking the menu button immediately displays everything at the correct size. However, switching to portrait mode, scrolling, or reloading causes issues with the menu responsiveness and display size inconsistency. I have tried adjusting the viewport meta settings without success. While I would like to keep the site scalable, percentage-based sizing becomes problematic at scales other than 1.0.

Am I overlooking something obvious here? Is there a more effective approach to achieve this? Can anyone identify why my page behaves so unpredictably on mobile devices?

htmlioscssipadviewport

Answer №1

After some investigation, I discovered that iOS doesn't fully support viewport relative units yet. I've switched them back to % units and that seems to have resolved most of the issues. It's still not perfectly mirroring the desktop version, but it's definitely a lot better than before.

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

Overlaying images responsively on top of each other

I have successfully achieved the result of displaying an image over another image using the following code: <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class="image-with-overlay"> <div clas ...

htmlcsstwitter-bootstrapresponsive-design

Exploring the effective utilization of bootstrap's push and pull functionalities

I've been struggling to rearrange my bootstrap columns for mobile view, but my code just isn't cooperating. It's likely that I'm making a mistake somewhere. Here is the snippet of my code: <div class="container"> <div cla ...

htmlcsstwitter-bootstrapresponsive-design

How can I create a Bootstrap 4 navigation menu that toggles on the left side but keeps the button on the right

Is it possible to create a collapsible bootstrap 4 navigation with the toggle button on the left side while also having action buttons on the right side that are not part of the collapsible menu? How can I prevent the navbar-collapse menu from pushing down ...

htmlcsstwitter-bootstrapnavigationbootstrap-4

What is the process for displaying prototype UITableViewCells within a UITableView without using a UITableViewController?

My UITableView has a prototype UITableViewCell controlled by a UIViewController, but the cell is not displaying when I run the app. How can I fix this issue? If you're curious about the reason, I am aiming for this specific layout, which I cannot ach ...

iosswiftxcodeuitableviewuiviewcontroller

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

AngularJS - A Guide to Detecting Window Resize and Orientation Changes in Landscape and Portrait Modes

I have attempted various suggestions from Stack Overflow, but none of them have been successful. Essentially, I am seeking to update (re-render) a custom directive whenever the window size changes. This is my code: angular.module('dynamicSlideBox&ap ...

javascripthtmlangularjs

Issue with styled-components not being exported

Issue: ./src/card.js There was an import error: 'Bottom' is not exported from './styles/cards.style'. card.js import React from 'react' import { Bottom, Color, Text, Image } from "./styles/cards.style"; fu ...

javascripthtmlcssreactjsstyled-components

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

javascriptjqueryhtmlimage

Using jQuery to create a Select All Checkbox that toggles a specific class

I have come across similar examples in the past, but I have been unable to make it work as intended. The examples I found only use standard checkboxes. I attempted to customize the checkbox using a sprite sheet by applying a class, but I am struggling to a ...

javascriptjqueryhtmlcsscheckbox

Can lines be visually represented within this specific div element?

I have a challenge where I am rendering data into a single div and I am exploring the possibility of using CSS to create three lines between the four columns. Even though it would be easier if I used separate columns with borders, I prefer the flexibility ...

htmlcssdivide

Sticky positioning causing issue with Bootstrap dropdowns

I'm attempting to design a data table with a sticky column that includes a Bootstrap dropdown button. Unfortunately, the dropdown conflicts with the sticky position and ends up opening behind the fixed column. It looks fine when opened from the top en ...

htmlcssstickybootstrap-5

H1 tags are mysteriously popping up in the post above on my Wordpress theme

Recently, I came across an issue with the Wordpress theme I developed where the H1 article titles start floating up into the next article when resizing the browser window. Despite my efforts, I haven't been able to determine what is causing this. Any ...

htmlcsswordpress

The JQuery keydown event will only be activated once unless another action occurs

I am attempting to display a font awesome '?' symbol after each element that has the ".info" class when the user presses and holds the "alt" key. It seems to be functioning properly, but when I release the "Alt" key and try to press it again, not ...

javascriptjqueryhtml

Assistance requested for integrating Remy Sharp's JQuery Marquee Plugin

I'm currently working on a project to display the latest tweets for a specific hashtag. I came across this example at http://exscale.se/__files/uploads/scrolling-twitter-feed.htm which shows tweets from user timelines rather than using the search api ...

jqueryhtmljsontwitter

Counting the number of items in a JSON object in

How can I determine the number of JSON items retrieved from JSONObjectWithData? id jsonObjects = [NSJSONSerialization JSONObjectWithData:receivedData options:NSJSONReadingMutableContainers error:nil]; NSLog(@"%@",jsonObjects); The JSON data returned is ...

iosjson

Utilize CSS appropriately for various web browsers

Embarking on my web development journey. Currently working with a CSS snippet that looks like this: height: calc(100vh - 46px); This code is effective across most browsers, but for Mozilla, height: -moz-calc(100vh -46px ); It seems to work. However, I ...

javascriptcss

Using jQuery to add a class to an input option if its value exists in an array

Looking for a way to dynamically add a class to select option values by comparing them with an array received from an ajax call. HTML <select id="my_id"> <option value="1">1</option> <option value="2">2</option> ...

javascriptjqueryhtmlajax

Is there a maximum number of divisions that can be nested within a canvas element?

My webGL(threejs) rendering in canvas inside a div is functioning as expected with the original structure below... <body> <div id='header'></div> <div id="webGLDiv"> <script></script> </div&g ...

javascripthtmlcanvasthree.js

Using JavaScript, extract elements from an HTML string that have the class "X" and then store them in an array

In need of assistance with converting a large amount of text content elements into a JSON format using only pure Javascript (no jquery). These elements must then be placed into a JSON array. For instance, transforming: <li class="asd">1</li> ...

javascripthtmlarraysjsonparsing

Keyframe Essentials: Lesson 5 Checkpoint 16 at the General Assembly

As a newbie to coding, I find myself struggling at project 5 checkpoint 16. The task at hand is to define a keyframe that makes the robot's eyes blink, but I can't seem to figure out where I'm going wrong with my syntax. @keyframes blink { ...

cssanimationkeyframe