Menu
I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page" id="myPage">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">Hello World!</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<script src="/jQueryMatrix/Inc/js/PRINT.js"></script>
</body>
</html>
But my font size looks so small. It's true, I can zoom in, but shouldn't the default font size be legible?
758
I had the same issue as well until I used media queries with pixel density. The following worked great for me, which allowed text that was 20px on desktop to display as the same size to my eyes on mobile:
@media screen and (-webkit-device-pixel-ratio: 2.0) {iPhone 5s, iPad Retina, etc.
body {font-size: 48px;}
}
I would look into setting the viewpoint in a meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some more info:
39
Since version 1.3 of jquery-mobile still lacks a feature to auto-scale text on higher resolutions, I'd like to share my personal workaround here. It is still a hack, but works quite well for me.
This is an override for jquery.mobile-1.3.0.css that makes all text within any ui components scale relatively to the font-size of the page body. Put this anywhere in your CSS and load it after the jQm CSS.
/* 16px > 1em */
.ui-bar,
.ui-loader-verbose h1,
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6,
.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner,
.ui-fullsize .ui-btn-inner,
.ui-fullsize .ui-btn-inner,
label.ui-submit,
.ui-collapsible-heading,
.ui-controlgroup-label,
.ui-controlgroup .ui-checkbox label, .ui-controlgroup .ui-radio label,
.ui-popup .ui-title,
label.ui-select,
label.ui-input-text,
textarea.ui-input-text,
.ui-li-heading,
label.ui-slider,
.ui-slider-switch .ui-slider-label {
font-size: 1em;
}
/* 14px > 0.875em */
.ui-li-divider,
input.ui-mini, .ui-mini input, textarea.ui-mini,
input.ui-input-text.ui-slider-input,
.ui-slider-switch.ui-mini .ui-slider-label {
font-size: 0.875em;
}
/* 12px > 0.75em */
.ui-mini .ui-btn-inner,
.ui-li-desc {
font-size: 0.75em;
}
/* 11px > 0.65em */
.ui-li-has-count .ui-li-count {
font-size: 0.65em;
}
If you then set the font-size of the page body within a media-query, all ui elements will automatically adapt to the bodies' font-size.
@media only screen and (min-device-width: 640px) {
/* increase font size on higher resolution */
body {
font-size: 26px;
}
/* increase icon size on higher resolution */
/* TODO .. */
}
I also recommend overriding the icons within the same query because the 36px versions will look way too small on higher resolution devices.
40
As far as I can tell, jQueryMobile is only so-so in adjusting to the high-density screens coming out with the latest mobile devices. Font size is already pretty small on my iPad 1, so I wonder if there is enough compensation in the CSS for retina displays etc.
I am not certain if it is helping much, but I am using these media queries to set the base font size of my app differently for higher-density screen.
body {
font-size: 14px;
}
@media screen and (-webkit-device-pixel-ratio: 0.75) {
body {font-size: 10.5px;}
}
@media screen and (-webkit-device-pixel-ratio: 1.0) {desktop browsers
body {font-size: 14px;}
}
@media screen and (-webkit-device-pixel-ratio: 1.5) {e.g. Google Nexus S (Samsung Galaxy S)
body {font-size: 16px;}
}
@media screen and (-webkit-device-pixel-ratio: 2.0) {e.g. iPad
body {font-size: 18px;}
}
The trouble is, jQuery applies its own pixel-based font sizes to a number of elements, so that you get inconsistent text sizes.
2
Yes you need that meta tag PLUS a fix for the orientation resize bug in iOS Safari:
Click to visit Github Page
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
