What if we started using PT as the standard unit for measuring fonts and element size?

Currently, I am in the process of creating a mobile app that will work across different platforms using jQueryMobile and PhoneGap. My initial focus is on developing for Android.

When it comes to Android app development, it is recommended that developers use dp as the unit for font sizes. DP, which stands for density-independent pixels, ensures that fonts appear the same physical size on the screen, regardless of screen density.

While this approach works well for Android, I am curious to know if other browser platforms also support this unit. My assumption is that they do not.

This leads me to question the need to move away from older methods or workarounds for setting fonts to a physically absolute size:

1. PT: where one pt equals 1/72 of an inch.

Could this method truly provide a reliable and universally supported physically absolute size for fonts across all browsers and devices? If so, why consider other options?

2. EM: defined as the size of the font for the document.

With PT offering an absolute size to begin with, leveraging em for font size could involve simply adjusting the document's font size to suit the screen through Javascript. If all other elements are specified in em, would that not suffice?

3. Exploring jQueryMobile* As I delve into this project, I am utilizing CSS media queries to determine screen dimensions and density, ultimately setting a base font-size for the element, followed by working with em for font dimensions. While many advocate for using em solely for fonts, could it not be beneficial to apply this approach to all text-containing elements in an app or site focused on text?

4. An Alternatove Perspective

Does dp extend its support to 'desktop' browsers and iOS as well?

androidcssjquery-mobilefont-size

Answer №1

While I'm not extensively knowledgeable about PhoneGap, from what I understand, it is a platform that allows you to run html/css/js within the phone's built-in browser (webview). This means you can develop an html5 app that functions like a native Android app.

The dp unit is specific to native Android applications that utilize native Android controls, and cannot be accessed from web pages or web apps.

Given that you are developing an HTML5 app, it's best to rely on web technology for specifying sizes and employ media queries to adjust sizes based on screen density. This approach seems most suitable for your project.

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

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

javascriptjquerycssjqgrid

Dropdown menu with CSS arrow

I'm attempting to create something similar to this: Here's what I have so far: Html: <div class="panel-heading" data-toggle="collapse" href="#data2"> <div class="heading"> APPLICATION </div> <span clas ...

htmlcss

chaotic telerik editor arrangement

I have incorporated the Rad Editor into my ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor ID="reSummery" runat="server" > </telerik:RadEditor> Despite not referencing ...

javascriptasp.netcsstelerikstyles

Using outdated methods can lead to misunderstandings

I'm feeling uncertain about utilizing a deprecated method. I am working with a class that extends the ListFragment class and I am integrating the onAttach() method, which comes in two different versions. @Override public void onAttach(Context context ...

androidandroid-fragmentsdeprecatedandroid-listfragment

There seems to be an issue with the functionality of Angular Material on iOS devices

I recently developed a website using Angular and Angular Material. While the site functions properly on Windows and Android across all browsers, I encountered an issue with iOS devices running Safari. Some elements on the page do not display correctly on i ...

htmlcssiosangularangular-material

Flutter - The 'parent != 'null' is not valid' error message is common when using the Navigator widget

I recently wrote a code that checks for a certain condition and should navigate to the next page if that condition is true. However, every time the condition returns true, I encounter an error instead of being able to navigate. class BuyTickets extends St ...

androidiosdartflutter

Error in android caused by mismatch in parsing JSON data types

I am currently working on parsing my JSON data { "000000000000000": [ { "employee_boycode": "00", "id": "000", "address": "abcdef", "name": "name", "bankcode": "abc", "branch_name": "abcd", "acco ...

androidjson

While using the Android Firefox browser, I noticed that the keyboard is causing my screen to shrink in size

As I work on creating a cross-platform HTML page, I have encountered an issue with text fields on Android smartphones. When I attempt to type in a text box, the keyboard pops up and causes my HTML page to shrink within the viewport. I'm curious to kn ...

androidhtmlcsssvgkeyboard

Do GPU-intensive animations get impacted by the CPU's load?

I have set up a special compositing layer for a div with the following unique styles: div { position: absolute; height: 50px; width: 50px; background: #900; top: 100px; left: 200px; will-change: transform; transform: translateZ(0); } Afte ...

javascriptcsscss-animations

Creating a cookie on click event to change the background

I am working on changing the background of a div onclick and storing it with a cookie. However, I am facing some issues with my code. I can't determine if the cookie has been properly set, and I am unsure about changing the background with the value o ...

javascriptjquerycsscookiesbackground

Issues with CSS hover event causing animation to fail to trigger

I have a container that contains an image holder and a text holder. I am able to set it so that when hovered over, the image scales and the same effect applies to the text. However, when attempting to set up the image holder hover to scale the image and ...

htmlcssanimationhovertransition

Overlapping Bootstrap columns detected when viewing on smaller screens

In an attempt to create a user-friendly layout, I developed two columns: one for the title and another for projects, with the latter being scrollable. The design functions as intended on desktop view but encounters an issue when the viewport is reduced to ...

htmlcssreactjsbootstrap-5

What is the best way to stop a jQuery function from applying titles extracted from the first row th's in thead's to multiple tables in a document?

My circumstances: I am new to jQuery and Stack Overflow, seeking assistance for my website project. The challenge: Building a website using Bootstrap 3.3.6 with intricate data tables that need to be stacked dynamically on mobile devices using CSS. It is c ...

javascriptjquerycsshtml

Responsive design parameters

After creating a media query specifically for phones, I realized that I needed one for desktop as well. @media screen and (max-device-width: 480px), screen and (max-width: 480px) { ...css here... body {width:50%;} However, when I attempted to add a sim ...

htmlcssmedia-queriestablet

Storing past entries in a local storage using JavaScript

Currently, I am developing a JavaScript program that involves 3 input boxes. The program is designed to display whatever is typed into each input box on the page. To store and re-display previous submissions, I have implemented local storage. However, I en ...

javascripthtmlcsslocal-storagestringify

Creating a dynamic feature in React where multiple icons change color individually when hovered over, all implemented

I'm looking to customize the icons in my footer by changing their colors when users hover over them. I have already created a CSS class with the necessary hover effects, but now I want to pass a parameter in my JSX file that specifies which color shou ...

htmlcssreactjshoverfont-awesome

240 dots per inch is the recommended resolution for optimal viewing on screens

I am trying to set up a folder called values specifically for 240dpi screens. If the screen resolution is larger than that, I would like to use a different folder, such as 480dpi. Unfortunately, the "values-sw240dp" folder is not functioning properly for ...

androidsizescreendpidimensions

The logo appears perfectly sized in CodePen, but it seems oversized in the Outlook email template

My email template (HTML with inline CSS) features a logo with a fixed width and height (px). Oddly, after receiving an email using this template, the logo expanded to fill the entire page width. I attempted to add !Important to the width and height propert ...

htmlcssemailoutlookhtml-email

Minifying HTML, CSS, and JS files

Are there any tools or suites that can minify HTML, JavaScript, and CSS all at once? Ideally, these tools should be able to: Identify links from the HTML document and minify the associated JavaScript and CSS. Remove any unused JavaScript functions and CS ...

javascripthtmlcssminify

Alter the typography of the text that has been enhanced by Google

I am attempting to modify the default font of certain text that is processed through google-code-prettify within an angular directive. The structure of the template served by my directive appears as follows: <pre class= "prettyprint" style= "border:1p ...

cssangularjstemplatesfontssyntax-highlighting