Responsive design may not always function properly on iPhones

Initially, this is how Chrome Dev Tools displayed it to me;

https://i.sstatic.net/9ZyHb.png

It appeared normal and responsive, but when I shared it with my friends, they showed me this instead;

https://i.sstatic.net/W0Hk9m.jpg

It looks completely different from what I see on my phone or in Chrome Dev Tools. This discrepancy only occurs on iPhones. I have included this code in index.html as well;

 <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />

I even had my friend download Chrome, but the issue persists.

htmlcssreactjsresponsive-design

Answer №1

When it comes to different devices, sizes can vary greatly. Do you know which model of iPhone your friend has and which one you have? This information is crucial because Chrome relies on these ratios and sizes to provide an accurate representation of how a website will appear. Based on the layout of icons in the screenshot, it seems like your friend may have an iPhone 10 or newer.

To have more control over the display of elements, you might consider using CSS media queries. This is just a suggestion and not necessarily a definitive answer, but I hope it proves helpful :)

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

How to position a column to the top of the page using Bootstrap's float left feature

Is it possible to float a column to the right of all other columns within the same row? <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> <div class="row content"> <div clas ...

htmlcsstwitter-bootstrap

Ideas for utilizing jQuery to extract data from CSS files

Hey there, I'm facing an issue on my HTML page where I have jQuery included. In my CSS file, I have quite a lot of lines and I'm trying to figure out how to read all styles for a specific element from the external CSS file rather than the inline ...

javascriptjqueryhtmlcss

"Incorporating a variety of images in a random order with

Wanting to create a fun game on my website using JavaScript, where hotdogs are added to a bowl in random positions forming a pyramid-shaped pile that eventually covers the entire page. However, I'm facing some challenges with the implementation. The ...

javascripthtmlcss

What is the best way to display json data in a react component?

I currently have a JSON file that I am importing into my component with the following code: import { beer, wine, spirits, alcopop } from '../../config/calculator.json'; I’m trying to figure out how to utilize this JSON data within my render m ...

jsonreactjs

Version 4.1 of Bootstrap offers a versatile multirow card layout with two columns

How can I make a two-column, multi-row card display using Bootstrap v4.1? I need this setup three times, with each pair of cards grouped for different tasks. Please see the code below and provide assistance. body { backgroun ...

htmlcssbootstrap-4

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

Here is the HTML code snippet: <div class="checkbox"> <label> <input type="checkbox" ng-model="selectedAll.value" ng-click="checkAll()" />Check All </label> </div> <div class="checkbox" ng-repeat="carType i ...

javascripthtmlangularjstwitter-bootstrapcheckbox

Uncovering the Depths of React Native Background Services

While using Firebase, I want my app to push notifications when new data is added to the database while it's in the background. Currently, I've implemented the following code: message.on('child_added', function(data) { pushNotificatio ...

javascriptandroidreactjsreact-nativemobile

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...

csslaravelvue.jsnavigationvuetify.js

Hide the chosen option within the following select box using jQuery

How can I hide the selected option in the first select box in the second one using jQuery? Here is my HTML code. <div> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <op ...

javascriptjqueryhtmlselect

Utilizing a Web Interface for Remote Monitoring of Windows Servers

I am in need of creating a webpage that will indicate whether a server is currently operational or not. These servers are all Windows based, with some running on 2008 and others on 2003. They are spread across different networks within various client locat ...

javascriptphphtmlsnmp

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

I am facing a challenge with my AngularJS dropdown that uses ng-options. I want to apply both the filter and orderBy components together in the ng-options section. The filter for the select is functioning correctly, but it seems like the OrderBy component ...

javascripthtmlangularjsdropdownng-options

html distinguishing between various fields within a form

As a newcomer to website development, I am trying to enhance the readability of my form with fields. Currently, all the fields are displayed one after another without any separation. Is there a specific HTML function that can help group these fields toge ...

htmlcssstylesheet

Positioning an item beneath two floating objects

Trying to create a visually interesting element on my website with 2 circles overlapping their parent element and 1 overlapping below. How can I make the third one centered below the first two? I've experimented with float left and right, but not sur ...

htmlcsscenter

What steps can I take to refactor a portion of the component using React hooks?

I am trying to rewrite the life cycle methods in hooks but I am facing some issues. It seems like the component is not behaving as expected. How can I correct this? Can you provide guidance on how to properly rewrite it? useEffect(() => { updateUs ...

javascriptreactjsreact-reduxreact-hooks

Learn how to dynamically show the chosen option from a dropdown menu in input text fields using AngularJS

html file: <select ng-model="shipping" ng-options="shipping.shipping for shipping in shipAddress"> <option value=''>--Select Address --</option> </select> <form name="shippingForm" class="form-horizontal" role="form" ...

javascripthtmlangularjs

`Is it possible to retrieve numerous downloaded images from formData using Express for recovery purposes?`

Apologies for my English, I am facing a small issue. I am attempting to upload multiple images but on the backend, only one image is being displayed. I am using React, Express, Formidable, and Cloudinary. Below is my front-end code: const [arrayFiles, set ...

javascriptreactjsexpressfile-uploadmultipartform-data

Having trouble with retrieving API on nextjs 13 (application directory)?

I am encountering an issue while trying to retrieve data from a headless CMS (Strapi). The error message "Error: _hooks_useFetch__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function" keeps popping up in Data.js. Can anyone assist me in understanding ...

reactjsnext.js

Load the div using ajax upon submitting the form

I have a basic HTML form with one input field and a submit button. The information entered will be sent to a PHP script which then stores it in a database and displays it within a DIV using Smarty. Without using Ajax, this process works fine as the data ...

jqueryajaxformshtmlsubmit

Retrieving checkbox values from HTML and storing them in a temporary JavaScript/HTML variable

My form has multiple checkboxes all with the same id "cbna". When I submit the form, I want the JavaScript code to check if at least one checkbox is checked. If no checkbox is checked, an alert should appear. If a checkbox is checked, the value stored in ...

javascripthtml

The drawbacks of using toJS() in React Redux: Is it really necessary in mapStateToProps()?

After reading through the Redux documentation, I came across a recommendation to not use Immutable with Redux. This advice has left me feeling confused. Why should I avoid using toJS() in the mapStateToProps function? It seems that React already uses Dee ...

javascriptreactjsreduxreact-reduximmutable.js