I have the following content on my site:
<div style="font-size: 11px; line-height: 17px; text-align: left;">
<p>lorem ipsum etc etc</p>
</div>
As you see, the font size is set at 11px. Of course it displays as 11px in all browsers, because there's no reason for it not to. Looking at "inspect element" there are no conflicting styles or anything. The inline font-size: 11px; is all there is.
However, for some reason I can't fathom, the text is huge in Firefox on Android. And I mean huge, to the extent that it ruins the layout of the page.
At first I thought it may be a problematic setting in my Firefox, but no. I tried on several devices and it's the same thing. There is an option in the browser to adjust the text size, as well as a 'font inflation' option, but even setting it to the smallest size, this paragraph remains gigantic.
Most of the site looks OK, it's this paragraph and a few others that are blown out of proportion. They all have set font sizes.
Any ideas?
I could solve it better with a link to your css file where these font styles are being handled but without seeing that I could suggest you try em units and see if you have any more luck.
An explantion + example of em being used in CSS -
EM units for font size
Other than that it could be a problem with font-family not being supported in the same way across all browsers or possibly some browser specific styles using moz (for firefox) and webkit (for chrome) being applied.
Related
In android application i am opening a web site.
In this website i am using rem as unit for width.
For html tag i have added font-size as 1px.
html{ font-size:1px !important; }
But if i see computed styles,i see font-size as 2.90909px
I have checked whether this css is getting overriden somewhere,but it is not.Attaching the screen-shot for the same.
Please let me know what is the issue and what can be workaround as i want html font size equal to 1px.
please see the highligted part,any known issue ?
You need to go deep, this should do it:
* { font-size: 1px !important; }
Using it on HTML tag will not affect some jQuery Mobile elements, like, for example, buttons.
I was playing around with a site that shows an ASCII/ANSI art logo and everything seems to work great in desktop browsers.
Then I wanted to see if it works on mobile devices but here it seems like the whitespaces are of a wrong width.
The part of the website showing the ASCII-art is wrapped in a <div> with following CSS properties:
line-height:1em;
color: #ff791a;
white-space: pre !important;
font-size: 0.7vw;
margin: 20% 50% 0 0;
font-family: 'Druid San Mono',courier, monospace, monospace;
width: 100%;
height: 100px;
I have tried with several variations of fonts like "Druid Sans Mono", monospace (also the monospace, monospace hack), "Courier" and "Roboto Mono" but none of them worked.
I also tried using nbsp instead of just spaces.
changing letter-spacing also did not seem to have the effect I wanted.
Is there any trick to get this to work ?
you can see the site here disconnected.tech
Turns out some gliphs are missing in Google fonts.
A workaround is Adobe's Source Code Pro, which has all characters (including box drawing, which is what I needed). Mononoki should also work.
I include straight from Adobe, not via Google Fonts: https://adobe-fonts.github.io/source-code-pro/source-code-pro.css
It may be possible to tell Google Fonts to include all necessary characters in their reduced Source Code Pro (text= parameter).
I am trying to allow the HTML font-size in a Xamarin.Forms WebView to increase/decrease in size according to the user's accessibility Large Text settings.
I want to do the following:
1: Get the preferred font size for text options (title, body, caption, etc.) from the Accessibility Large Text options for iOS and Android.
2: Get the default size for some HTML text (h1 could be 15px, h2 could be 13px, h3 could be 11px, p could be 7px, etc.) and use that with the correct text option (h1 <-> title, p <-> body) to calculate the new font-size for that HTML element.
I have found some links for iOS, Android/iOS and Xamarin.Forms on how to get some font-sizes but I can not figure out how I would get these sizes, translate the sizes of these text options to the size of some default HTML elements (H1,H2, P) and do the math to calculate the new font-size for the CSS.
Can someone help me out by figuring out some sort of plan on how I would do this? Or can someone help me by giving me a link on how I can get some sort of percentage on how big a font-size is compared to a certain default value thanks to Accessibility large text?
Thanks!
I've figured it out:
Android changes the HTML text size according to the accessibility settings automatically. No work required!
iOS allows a developer to implement several CSS classes to make the WebView change
it's text size to the accessibility settings on the iOS device.Click here to find out more
These are the classes:
-apple-system-headline
-apple-system-subheadline
-apple-system-short-headline
-apple-system-short-subheadline
-apple-system-body
-apple-system-short-body
-apple-system-tall-body
-apple-system-caption1
-apple-system-caption2
-apple-system-short-caption1
-apple-system-footnote
-apple-system-short-footnote
Go to this website on your iOS device to see what the classes look like
To use Apple's predefined fonts:p {font: -apple-system-body}
To use your own font: (You can also create your own font-family with #font-face and reference that instead of Arial!)
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
You can use the following properties:
font-family
font-weight
font-style
font-variant`
To use your own font-size:
p {
font: -apple-system-body;
font-family: Arial, sans-serif;
font-weight: normal;
}
.body-text-size {
font-size: 1.1em;
}
<p><span class="body-text-size>This is some text in my page.</span></p>
Hope it helps!
Update 04-2020: I noticed one of my preview links was dead. I fixed it by finding another repo that hosted the file. I have linked that one instead and in case my links die again, I have added them to the web archive so you can find them there! :)
Probably a basic question to the experts in this
Example:
I have image 2000x1500px # 556kb - a set of pictures of that size causes iOS devices to not load the page (considering there are many pictures) due to cache levels I'm guessing.
If I create two of the same files one at 2000x1500 and other at 800x450 with a much lower weight due to smaller dimension - which would be intended for mobile devices only.
How would I address that in CSS or whatever is the right method to go about this?
If you can determine what image sizes to use for mobile/tablet/desktop/extraneous cases then you can use javascript or CSS media queries to accomplish replacing the images on the fly.
For instance say you know all your mobile devices will trigger at window width 768px and that it is safe to assume an image size less than 500kb will be good for all these devices, then CSS is your solution:
HTML
<img class="mobile_image" src="mobile_image.png" alt="Mobile Image"/>
<img class="desktop_image" src="desktop_image.png" alt="Desktop Image"/>
CSS
#media (max-width: 768px) {
.desktop_image { display: none; }
.mobile_image { display: block; }
}
Note: Media Queries for standard devices
If you need something more sophisticated, due to identifying which device is being targeted, you can also couple the above CSS with Javascript for image detection.
Look here: What is the best way to detect a mobile device in jQuery?
You could use srcset attribute
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
Nice demo can be seen here and more details here
To see which browsers support this attribute see here, firefox 38+, chrome 39+, safari 7.1+, opera 29+, ios safari 8.3+ ...
The src and srcset attributes on the img element can be used, using the x descriptor, to provide multiple images that only vary in their size (the smaller image is a scaled-down version of the bigger image).
Browsers can then use this information to pick the best image source.
Other option is to use <picture> tag and srcset attribute together.
The picture element gives developers control when those images are presented to the user.
<picture>
<source media="(min-width: 20em)"
srcset="image-big.jpg 1x, image-big-hi-res.jpg 2x">
<source srcset="image-small.jpg 1x, image-small-hi-res.jpg 2x">
<img src="fallback-image.jpg" alt="No support for picture tag">
</picture>
I have the HTML code below. I have set the body's width to 640px which is close to what the iPhone's resolution is. However, when I view the webpage on either an iPhone or an Android, it shows up just like it would in my web browser - only taking up part of the screen. The text is so small it's not usable.
What CSS code do I use so that the text stays normal in desktop browsers, but fills the screen on a mobile device? I read some things about using device-width properties but I can't get those to work either. What am I doing wrong?
Note
I'm not trying to get the red border to stretch all the way across the screen (eg: body:width100%). I just don't understand why the iPhone is not zooming into an area that is set to the same resolution it is supposed to have.
HTML Code:
<style>
body{ width:640px; border: 1px solid red; }
</style>
</head>
<body>
Hello World
</body>
</html>
Actual Output:
Desired Output:
Put this in your head tag:
<meta name="viewport" content="width=480">
To make the iPhone zoom in on the page, you can use the viewport meta tag.
You can set a scale of 1.0 to make Mobile Safari zoom in on your content exactly, no matter it's actual size.
Here's some documentation on different ways of setting the viewport: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Have you tried body { width:100%; border: 1px solid red; } ?
You'll have to use media queries for this.
http://www.alistapart.com/articles/responsive-web-design/
Example: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Resize the page)
A seemingly straight-forward tutorial: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
If you're creating a webapp for iphone, you should really take a look at PhoneGap. If you're feeling a bit adventurous, it really is quite easy to use.