How To Get Started With jQuery Mobile

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually or pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it. Get the latest and greatest from MDN delivered straight to your inbox. The compatibility table on this page is generated from structured data.

Prefixed Notes.

Prefixed Disabled. Last modified: Mar 23, , by MDN contributors.

Style Classes

Related Topics. CSS CSS Reference CSS Text Properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap paint-order tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing. Learn more about Teams.

Asked 7 years ago. Active 7 years ago.

How To Create a Responsive Text

Viewed 18k times. I have also tried this but that did not work as-well:. Farhan Ahmad Farhan Ahmad 3, 5 5 gold badges 31 31 silver badges 67 67 bronze badges. Yes I have tried that. Nirmal Patel Nirmal Patel 4, 8 8 gold badges 34 34 silver badges 51 51 bronze badges. Exactly what I was looking for. Nirmal Patel : should this be text-overflow: inherit; instead of initial? For styling only particular buttons, make these styles specific to a parent container for your buttons. Writing the reset rules separate will give you a blank canvas that you can customize with less effort.

Here is a suggested reset code:. Notice that in this example I am only targeting elements that are buttons and have the reset theme assigned. The CSS reset rules that are valid for a button element might not be valid for a navigation element. Instead of writing rules around the the reset class ui-btn-up-reset, ui-btn-hover-reset, and ui-btn-down-reset it makes sense to target the theme and the specific element type.

On top of the reset theme we can add other CSS classes to modify the appearance of the button without having to repeat the reset rules.

Subscribe to RSS

The idea behind this type of manipulation is not to complicate things. The following example will show how to create a theme family that you can extend while preserving the reset rules in a separate file:.

Imagine that you need to make a one time change to a button. This is an interesting scenario. There are scenarios where you might need to create a more complex structure inside the button. In order to create the point for the button we added a SPAN tag that takes a linear gradient from the upper left corner to the lower right corner.

The new elements are added from a callback function that is trigger when the document loads:. If you choose to use Javascript to modify the structure of a button, be aware that your mobile application might load other pages and your code might have to be executed again to make sure that the newly loaded page inherit the changes. If you just want to get rid of the button background and text all together, you apply the reset theme and focus on the icon.

The example below uses a standard navigation bar but removes the background, borders, and text label from the button. Finally, remember that the look-and-feel of a button will change depending on where the button is located. You can use this class name as your starting point in your CSS selector:. Throughout this article we discussed how to customize standard jQuery Mobile buttons in ways that will give you absolute control over the look-and-feel.

You might be right. It is easier, but not scalable. The screen size and resolution of the devices are constantly evolving. The application layout is becoming more responsive. To accommodate for all this changes you need to pick a strategy that is efficient, flexible, and more important, pain-free. Addressing elements customization using CSS while preserving the original HTML structure might not be the easiest way, but it is certainly more scalable path.

Your Answer

Download Custom Buttons Example. Not registered? Create an Account. Lost your password?