Incorrect font size when applying float to the right in CSS on Mobile Safari

Encountering an issue with a basic CSS-Layout. Everything looks good on desktop browsers, but iPhone's Mobile Safari is causing some trouble. It seems that using style="float:right" conflicts with the automatic font size adjustments made by Mobile Safari. Although the code works perfectly on desktop, on the iPhone "Left" and "Following text" appear significantly larger than "Right":

Left<span style="float:right">Right</span>
<p>Following text</p>

It appears that Mobile Safari's auto-resizing is not affecting the floated word, only the others. One suggestion mentioned here is to add -webkit-text-size-adjust: 100% like this:

<body style="-webkit-text-size-adjust: 100%">
    Left<span style="float:right">Right</span>
    <p>Following text</p>
</body>

However, I would prefer to retain Mobile Safari's intelligence in adjusting font sizes for better readability. Additionally, I am looking to avoid creating separate layouts for various screen sizes.

So, is there a more iOS-friendly way to align words to the left and right in the same line of text?

htmliosiphonecssmobile-safari

Answer №1

If you're working on a responsive website, you may have encountered an issue with WebKit automatically enlarging the font size for what it considers to be the "primary" text on the screen. This can be frustrating, especially when certain text elements are not recognized as primary content after being floated. To prevent this auto-zooming behavior, you can include the following CSS rule:

body {
    text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%;
    }

Keep in mind that this property is still considered experimental according to Mozilla's documentation. For best results, combine this fix with a responsive design strategy that adjusts content appropriately for users on smaller devices.

Just a word of caution: avoid using none as it has been known to trigger a bug in older WebKit desktop browsers, leading to issues with text zooming functionality.

Answer №2

Experiment with different ways to position the text inside the span elements. One option is to try using position: absolute; right: 0; on that span element and observe how iOS handles it in terms of auto-resizing. I conducted a test within the iOS simulator and found that all texts were displayed at the same size.

Feel free to check out the jsFiddle link for the code I used in my testing: http://jsfiddle.net/AntLm/3/

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

Is there a way to adjust the brightness of specific sections within an image using html, css, and js?

I am working on a project where I have an image with tags underneath that correspond to different parts of the image. For example, if the image is of a dog, one of the tags could be 'nose', indicating the portion of the image around the dog' ...

javascripthtmlcssfrontend

Navigating to a specific page based on the selected option is the key to efficient web browsing

I'm currently working on a form development project and I'm looking for guidance on how to navigate to different pages based on the selection made in a radio button. Here's the current form setup with two radio buttons: .sh_k .sh_sl { ...

javascripthtmlcssradio-button

iPhone failing to interpret HTML entities

I am currently developing a website for a client, who is facing a bug that I have not been able to replicate... For reference, here is an example page: The issue my client is experiencing involves using an iPhone to navigate the website. It appears that ...

iphonehtmlangularjs

Button Element Not Appearing in JavaScript/HTML

My current project involves creating a replication of the Windows calculator to practice JQuery and JavaScript. I have already set up all the HTML buttons for this basic calculator, but I am facing an issue where only the number "1" is displayed when click ...

javascriptjqueryhtmlcalculator

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...

webkitcss

Having trouble displaying an image on a subpage in HTML

I've been struggling to display an image on one of my subpages using HTML. I suspect that the issue lies in how I am referencing the image file in the code. The image file is named crab.jpg and it is stored inside the pics folder within the Websites d ...

html

Transform a Javascript string variable into plain text within a pre-existing text document

Currently, I am storing user input from an HTML input as a JavaScript variable. The objective is to convert this data into plain text and save it in an existing text file. Essentially, each time the user provides input, it should be converted to plaintext ...

javascripthtml

The function of uploading multiple images is not functioning properly when attempted multiple times on a single page

I have been attempting to edit multiple image uploads at once, but it doesn't seem to be working. Please provide any suggestions or solutions. Below is a sample code snippet: <div id="upload_form" class="hide"> <form action="multi_files ...

phpjqueryhtml

The functionality of Angular Datepicker is disrupted when scrolling through the page

Coding in HTML <div class="col-5 col-md-3 px-0 daterange-picker"> <div class="form-group"> <div class="input-group"> <input type="text" id="second ...

javascripthtmlcssangularangular-ui-bootstrap

Safari keyframe animation causing wobbly off-center rotation

When viewed on Safari, the spinning animation appears off-center. How can this issue be resolved? The CSS code responsible for the animation is as follows: html, body { height: 100%; } body { background: #a6b8b1; display: grid; place ...

htmlcss

Struggling with getting a page-break to properly function within a Bootstrap modal

I have a Bootstrap (v4) Modal that consists of multiple sections, and I am trying to print the content of the modal-body with each section starting on a new page. To achieve this, I have included the following CSS: section { page-break-after: always; ...

cssprintingbootstrap-4bootstrap-modalpage-break

Using JSON data to populate an HTML page

I'm currently working on a project that involves creating a "Twitter" page. The idea is to utilize the JSON file available at to display some of its content. However, I'm facing an issue where my page only shows the table headers and nothing els ...

javascriptjqueryhtmljson

Remove the icon disc background from a select element using jQuery Mobile

As I delve into building my first jQuery Mobile app using PhoneGap/Cordova, I have encountered some challenges along the way in getting the styling just right, but overall, things are going well. However, when it comes to working with forms, I hit a roadb ...

javascripthtmlcssjquery-mobilecordova

"Arranging elements in a stack using Bootstrap's collapse

Currently, I am utilizing the collapse feature of Bootstrap 4.0.0 to show and hide a bootstrap "row". Within this row are four columns - "col-md-3" - containing buttons. The layout of this row is exactly as I desire until I include the "collapse" class, at ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

Is there a way in CSS to only display a background image if it can be fully shown without setting the width in pixels? I want to avoid showing partial background images. Is there a CSS property that can help with this? [] <div align="left" style="pad ...

htmlcss

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Initially: https://i.sstatic.net/SLG7O.png After adding a new row and then removing it. https://i.sstatic.net/FegjK.png Why is this happening? When I set val(""), the textbox should have no value. What mistake did I make in my code? Please assist. Her ...

javascriptjqueryhtmlasp.netclone

Creating a customizable range input for pixel values: a step-by-step guide

I am looking to design a pixel range input. Here is an example: let slider = document.querySelector("input"); slider.addEventListener("change", () => { console.log(slider.value); }); <input type="range" min="5px" max="50px"> However, the r ...

javascripthtml

Choose a Vue filter according to the variable selected

My Current Table Dilemma Creating a table from a 2D array in Vue2 has been successful for me, as I've managed to display all the values correctly. However, I am facing issues with formatting. The template code is structured like this: <table> ...

javascripthtmlvue.jsvuejs2

How can I create an image of a number using Bootstrap?

I have a collection of web pages featuring tiles with various images For example: https://i.sstatic.net/HKna1.jpg Some of my pages look identical to these, but do not include any images https://i.sstatic.net/rLXPY.png In the second screenshot, each ti ...

htmlcssbootstrap-5