Create a responsive design for a webpage that adjusts font size based on the dynamic type settings in iOS

Is there a way to ensure that my website's font size dynamically adjusts for iOS users? For example, if a user changes the font size in their iPhone settings (Settings > General > Accessibility > Larger Text), I want the webpage font size to adapt accordingly.

Currently, I have added font: -apple-system-body in the html root, and I am using rem units throughout the website to adjust the font size relative to the html root. However, the default font size of 16px from -apple-system-body is too large for my page, so I need to convert it to 10px. Essentially, I want my html root font size to always be 62.5% of what the system provides.

Right now, I am achieving this with javascript by using:

document.documentElement.style.fontSize = document.documentElement.style.fontSize * 0.625;

I'm curious if there is a CSS-only solution to this issue.

htmlcssfontswebkitaccessibility

Answer №2

A good practice is to set the HTML size to 62.5% instead of 10px in order to honor system settings. The 10px value serves as a fallback for outdated browsers and may not be necessary.

html{
    font-size: 10px;
    font-size: 62.5%;
}

Make sure to use rem or em units consistently throughout your code if you decide to go with this approach.

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

I am currently working on making my social items more responsive, however, I am encountering some issues. Any ideas or suggestions on how to resolve this

Find my resume project on GitHub at https://faizan-ul-hasnain.github.io/Resume-Project-/ and let me know how to improve it. Visit my resume project here ...

htmlcss

Enhancing navigation with creative hover effects

I've noticed a trendy effect on several websites and I'm curious about how it's done For example: When you hover over one of the navbar links, it appears as a button rather than a differently colored text link. How can I achieve this? I am ...

htmlcssreactjstwitter-bootstrapbootstrap-5

Angula 5 presents a glitch in its functionality where the on click events fail

I have successfully replicated a screenshot in HTML/CSS. You can view the screenshot here: https://i.stack.imgur.com/9ay9W.jpg To demonstrate the functionality of the screenshot, I created a fiddle. In this fiddle, clicking on the "items waiting" text wil ...

jqueryhtmltypescriptangular5

An anchor-shaped name tag with a touch of flair

I stumbled upon this unique anchor name design on the website Does anyone here know how to create something similar? What is that style called? ...

javascriptjqueryhtmlajaxjson

Ensure that the width of the inner table matches the width of its contents within an overflowing div

I'm facing an issue with a table inside a div styled as table-wrapper: .table-wrapper { display: inline-block; overflow-x: scroll; width: 800px; } Although I want the div to display a horizontal scrollbar so that the table inside it can ...

htmlcss

1 in every 3 divs in jQuery, chosen randomly

Hey there! I have a fun project in mind - programming a "Rock Paper Scissors" game with the computer. The only issue is figuring out how to make the computer choose a random object after I pick one of the 3 options. Here's what I've come up with ...

jqueryhtmlrandom

How can you check the varying font renderings on your phone?

https://i.sstatic.net/z7HcQ.png https://i.sstatic.net/1tH5d.png Having some trouble with the font display on my website. Currently using: font-family: 'Fredoka One', cursive; It's working well on PCs and desktops, but when viewed on a pho ...

htmlcss

What is the best way to extract text that falls between two specific patterns using the preg_match_all function in PHP

I've been struggling to locate two specific HTML tags and extract the content in between them. When I search for each tag individually, they are found successfully, so I am confident that they are spelled correctly and do exist. However, I believe the ...

phphtmlregexpreg-match-all

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

javascriptjquerycssajax

Add navigation dots to the slider in order to align them with the specified div element

Visit this JSFiddle link for the code <html> <link href="./style.css" rel="stylesheet" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script&g ...

javascripthtmljquerycss

Turn off the Antd Datepicker tooltip

I'm using Antd Datepicker in my website. We get an array of numbers representing disabled dates from an external api and show only the dates in the datepicker(no month, year etc). The date selection is for a monthly subscription and the user just sele ...

cssreactjsdatepickertooltipantd

Problem with animated scrolling in Jquery

Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle. Everything works perfectly when the user scro ...

javascriptjqueryhtmlcss

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...

csshtml

query in PHP to display specific data

Seeking guidance for developing a document tracking system using PHP. Struggling with defining the correct title for my project and unable to generate relevant keywords for search queries. The main issue pertains to determining how the system can validat ...

phphtmlmysql

How can we use Bootstrap to ensure that items in a div are aligned horizontally on larger devices and vertically on smaller devices?

I am currently working on creating a div that contains some information, similar to the layout used on the Coinbase website. However, I am encountering issues with styling as I want this div to be responsive - horizontally aligned on larger devices and ver ...

htmlcss

Ways to change the default blue dropdown color in the Chrome browser

When you click on the drop-down menu, a blue color appears when hovered over. I want it to be red instead, but for some reason, it's not working in Chrome browser. Here is the CSS class that I have used: option:checked { box-shadow: 0 0 10px 100p ...

cssasp.net-mvc

Issue with Flask app's template rendering when trying to search for a book

Currently, I am working on a Flask web application that has the functionality for users to search for books and view detailed information about them. However, an obstacle I am encountering is that the form does not get sent to the specified URL. Below is ...

htmlflask

changing html numbered list to xml format

Looking to convert HTML ordered lists with different types into XML markup? <ol type=a> <li>This is list item a</li> <li>this is list item b</li> </ol> <ol type=i> <li>This is list item 1</ ...

htmlxmlxslt

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery

I need assistance with scrolling the #container div inside the .bloc_1_medias div. The height of #container is greater than that of .bloc_1_medias. My goal is to implement a function where clicking on the "next" and "previous" text will scroll the #contai ...

javascriptjqueryhtmlscrollbarscrolltop