The font size in the Android Chrome browser appears different when switched between portrait and landscape modes

I have uploaded a screenshot here, but I am puzzled as to why the font size appears differently on the Android browser in portrait and landscape modes.

$(document).ready(function(e) {
    var x=$(".main").css("font-size");
alert(x)
});
.main{
font-size:18px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>


<body>


<div class="main">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>

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

What steps can I take to ensure my site retains its appearance when minimized?

When I maximize my website, it looks great, but when I restore it down, the box on my site becomes distorted. I'm new to designing websites and struggling with this issue. Here's the code I've been using: .boxed { position: absolute ...

Exploring the capabilities of querying HTML using XPath with Python's lxml library

After reading an HTML page as a string, I am using tree = html.fromstring(data). Now, I aim to utilize lxml xpath for querying. Here is an example of the specific part that piques my interest: <table class="class"> <tbody> <tr> &l ...

Designing the child table layout using grid grouping in ExtJS4

I have customized my Extjs4 grid grouping implementation to hide the expand-collapse sign and prevent group header expansion for empty groups. However, I am facing an issue where a white 1px border is being created due to the following CSS class: .x-grid- ...

Using JavaScript to modify the width of an element

I have been struggling to increase the width of an element in my HTML using JS, but it's not working correctly. This is crucial for responsive design as the content should scroll when necessary. I attempted to achieve this with the following code, ...

Building a dropdown menu in jQuery Mobile by clicking on an icon: A step-by-step guide

Is there a way, preferably in jQuery Mobile, to have an icon in the header that, when clicked, displays a dropdown menu? The dropdown menu should allow users to select items without replacing the original icon. Essentially, the icon should remain visible ...

Content on the website that adjusts to different screen sizes horizontally, while maintaining a

Currently, I am working on developing a responsive website using Bootstrap. While the layout works well when resizing the window horizontally, there is an issue with vertical resizing. I do not want the height of the elements (such as Bootstrap columns, im ...

If an element contains a specific class, then set its display property to none

I am attempting to utilize the hasClass method in JavaScript to determine whether a div should be hidden (display: none) or kept visible as usual. Below is the snippet of code I currently have: if (!$('cool').hasClass('hot')) { ...

What is the best way to vertically reposition two divs within the DOM using jQuery?

I need some help with this task. Here is the code I'm working with: <div class="one">You might also invite...</div> <div class="pic1"></div> <div class="name1">Some name</div> <div class="pic2"></div> & ...

The functionality of jQuery .rotate() appears to be malfunctioning

I'm struggling to get this code working properly. My jQuery version is 2.1.0. Here's the code snippet: $("a.shownav img").rotate(180); Any suggestions on how to make it function correctly without relying on a plugin? ...

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

Are you accessing the site on a variety of gadgets?

I am currently working on a website with the goal of making it responsive. So far, it looks great on desktops and mobile phones like the iPhone and Galaxy S4. However, I am encountering difficulties in making the website look like it is on a mobile phone w ...

Steps for creating a sleek vertical slider with transitional effects using JavaScript and HTML

Take a look at my code snippet: <table> <tr> <td onclick="shownav()">Equations of Circle <div id="myDownnav" class="sidenav"> <a>General Info</a> <a>In Pola ...

Editing the header section of the stylesheet file

I need help with my Wordpress website. I want to remove the top black bar, but I'm worried it will affect other elements coded within it. Is there a safe way to remove the top bar without disrupting the rest of the components? The website in question ...

What is the best way to apply CSS hover effects to specific cells within a table?

Is there a way to selectively apply CSS hover effects to only specific cells in a table? And can I disable it on the cells where I don't want it? td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-styl ...

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

Tips for enlarging an image within a table cell when hovered over using CSS

I am attempting to create a feature where images within cells in an HTML table enlarge when hovered over. My goal is to implement this functionality across all tables on my website. Take a look at the code I have written so far: td img { height: 150px ...

SharePoint 2013 only allows the first AJAX request to work successfully, except when in Edit Mode

I am facing a challenge of making two AJAX requests simultaneously on a SharePoint page. One request originates from the current site, while the other comes from a team site. When I use different URLs (/events) and (/travel), each one works fine when use ...

Can the boundary of a div be softened or blurred?

My goal is to implement a design where each div of a specific class on my site displays a border that appears slightly separated from the content inside the div, similar to the example shown in this image (link below). Is there a CSS solution to achieve th ...

Troubleshooting problems with AJAX function in the .each() loop

My webpage showcases a grid layout with 16 blocks arranged in 4 columns and 4 rows. As you scroll to the bottom of the page, an AJAX function dynamically loads another set of 16 blocks each time. To enhance user experience, I wanted to implement a smooth ...

Scroll the div until it reaches the top of the page, then make it fixed in place

Let's dive right in: The code I am working with is as follows: <div id="keep_up"> <div id="thread_menu"> <div id="new_thread"> </div> </div> </div> And here is my CSS: #keep_up { po ...