Issues regarding the sizing of fonts on mobile devices

Struggling to create a responsive site that looks good on high dpi mobile devices? You're not alone. No matter how you adjust your h2 and p text sizes, they seem to be the same size when viewed in portrait mode on certain devices like the Galaxy S4. Even weirder, the viewport width always shows as 980px, regardless of orientation.

Using

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

doesn't solve the issue either - the phone still behaves like a tablet due to the fixed viewport width. Researching online has not provided any clear solutions. Does anyone have any suggestions or insights into where I might be going wrong?

Thanks!

Edit: I attempted 

@media all and (min--moz-device-pixel-ratio: 1.5),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5)

which helped with setting separate media queries for higher pixel ratio devices. However, the font size discrepancy between h2 and p elements remains puzzling. Trying to make the h2 twice the size of the p by adjusting the em values results in unexpected font sizes in portrait mode on my device. Any ideas on how to tackle this issue?

androidhtmlcss

Answer №1

Although there is no guarantee, here is my typical approach:

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

Keep in mind that em's are relative units, meaning they change depending on the parent font size. For example, if your body font size is 14px, an h2 would be 28px, but if the container has a font size of 16px, the h2 would be 32px.

Additionally:

I prefer using fixed pixels for breakpoints rather than em's. It's important to include device-width as well. For instance, for tablet-specific styles:

@media only screen
and (max-device-width: 979px),
(max-width: 979px) {

Answer №2

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

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

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

Alignment of columns within an HTML grid

I can't seem to figure out why my grid column headers are not aligning properly with the data in the grid. It's puzzling that they have the same CSS class but different sizes. Can someone please help me with this: .outer { width: 60%; heig ...

htmlcss

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within <div class="container_page_2">. When I refer to vertical alignment, I mean having an equal distance between the top of the page and ...

htmlcss

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

Transform your dictionary into an interactive HTML table that allows users to search through the results with ease

I have a university project where I need to exchange data via JSON using a Python script and a server, and then display it in a browser with an add and search function. The information being added includes student names, surnames, and ages. I must apologiz ...

pythonhtmljson

Creating a Authentic Screw Top Appearance with CSS

I am striving to create a realistic screw head. Here is what I have done so far: <div class="screw"><div class="indent"></div></div> .screw { position: absolute; top: 10px; left: 49%; width: 30px; height: 30px ...

javascriptjquerycsshtml

Send a user to a different page following a page redirection

I'm attempting to redirect a page after a previous redirect, each one at a specific time interval. For example, after 5 seconds I want to redirect to one page, then after another 5 seconds to a different page. I'm not sure if this is possible. T ...

phphtmlredirect

What are some creative ways to enhance closePath() in canvas styling?

Currently, I am faced with the challenge of styling the closePath() function on my canvas. Specifically, I would like to apply different stroke styles to each line segment. For now, let's focus on changing colors for each line. In the example below, y ...

javascripthtmlcanvas

How to use Gson to deserialize JSON in Java

Struggling with deserializing json in java using gson. This is the json I am working with: {"races":[ {"id":1,"mask":1,"side":"alliance","name":"Human"}, {"id":2,"mask":2,"side":"horde","name":"Orc"}, {"id":3,"mask":4,"side":"alliance","name":"Dwarf"}]} ...

javaandroidjsongson

javascript function not being invoked

Currently, I have incorporated the following HTML <html> <head> <Title>EBAY Search</title> </head> <script language="JavaScript" src="ajaxlib.js"></script> <body> Click here & ...

javascripthtmlajax

Customizing the color of buttons in MUI 4

Currently, I am utilizing mui V4 for my styling and attempting to incorporate an additional color for my buttons. I understand that it only accepts these predefined colors: expected one of ["default", "inherit", "primary", "secondary"]. To achieve this, I ...

cssreactjsmaterial-ui

The orientation of the displayed images has turned vertical, breaking away from the traditional horizontal

My problem lies in trying to horizontally display the images fetched from the database. I attempted using "inline-block" but it proved ineffective. Despite looking for alternative solutions, none seemed to be a fit for my situation. $db = mysqli_connect(" ...

phphtmlcss

What is the best method for showcasing numerous dropdown lists using JavaScript along with conditional if-else statements?

Hello everyone, I am currently new to javascript and I'm attempting to build a small web application using javascript. However, I am facing an issue with printing the drop-down list output. Could someone please assist me in resolving this problem? < ...

javascripthtmlif-statement

Utilize jQuery to retrieve data attributes and set them as CSS properties in a key-value format

Looking at the HTML below: <h4 data-padding-top="100" data-padding-left="0" data-text-align="left" data-color="#ffffff">Promotion Two</h4> I aim to use the data attributes as CSS styles for the H4 element. I have attempted to achieve this ...

jquerycsskeyvaluepair

Divide the string into an array by separating it at every second instance

Hey there! I know this might be an easy one, but my Java skills are a bit rusty. So, here's the deal - I've got this example string: aaa\n123\nbbb\n124\ncccdef\n125\ndefg\n126 What I want to do is split the ...

javaandroid

Display the title tag when hovering over an image

Hey there! I'm looking to display the title tag of an image directly inside the image itself. Here's an example to illustrate what I mean: http://jsfiddle.net/51csqs0b/ .image { position:relative; width:200px; height:200px; } .ima ...

phpjqueryhtmlcsswordpress

Displaying a map inside a dialogue box

Initializing the map view inside a dialog may result in slow loading times. The map is being loaded, but it takes longer than expected. Below is the layout where the MapView is defined: <com.google.android.gms.maps.MapView android ...

androidgoogle-mapsandroid-mapview

What is the best way to style multiple classes within the same element (specifically an ordered list ol

Using CSS counters, I have created various styles for an ordered list <ol> by applying different classes and adjusting the styles accordingly. Now, I want the counters to adjust based on screen size, displaying smaller numbers on smaller screens. To ...

cssclasshtml-liststargeting

Tips to center a circular progress bar in Material UI

Does anyone know how to properly center-align a circular progress bar in a login form using material UI? I'm having trouble with it not being positioned correctly: screenshot {isLoading && <CircularProgress />} {user?.ema ...

javascripthtmlcssreactjsmaterial-ui

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly. However, as the num ...

javascripthtmlcss