All geek questions in one place

Text displays different size on iphone

On an existing website, one block of text is displayed too much on the iPhone, and part of it is white. I tested it on Android and iPad, which removes the rest of the site too much, so it does not match the background. This is the correct size on the iPad, but is still displayed in white. This text is located in the upper right corner of this page: http://www.ecodzign.com/waterfx2/index2.html Here is how it looks on iphone:

enter image description here

I turned off text scaling, and I tried using inline css, with no effect. Only phone numbers are displayed in white, so I assume that the iphone creates some kind of link to call these numbers with the phone, but regardless of what cannot be white with a white background.

I apologize for the awful design of the table and the lack of verification, but I just do not plan to redo the entire site correctly. There are no validation errors related to text or formatting, I doubt this has anything to do with what is happening.

+4
source share
3 answers

It could be the difference between things like pt vs px vs % on your iOS device for this particular unit.

After checking the code, I think it really is:

 font-family: Arial,Helvetica,sans-serif; font-size: 8pt; color: black; font-weight: bold;

font-size: 8pt I bet this is a criminal.

+2
source

The site should have a lot of inline CSS.

What have you tried this

<span style="color:black !important;">702.233.3200</span>

using the !important keyword.

+1
source

Most likely, this is due to the CSS site. Your best option is to create a mobile site or remove <span style='color:black;'> from the html that wraps these numbers.

0
source

Source: https://habr.com/ru/post/1384994/

More articles:


All Articles