I'm building a website, which is (almost) mobile friendly, and after testing it on several devices, have found that things work well - Except for the fact that on my device, some of the text was bigger than it should have been after scaling.
I found that it was due to my device (Galaxy S4) having "Text Booster" function checked, which must detect larger amounts of text and resize it automatically to suit what it thinks is a more correct size.
Now this is fair enough, but I was hoping that I would be able to have control over the size of the font on various device widths using purely CSS.
IMPORTANT I'm finding that my "About Text" in the footer isn't affected by the booster, so I'm hoping that there is a way to prevent the main article text being resized, but does anyone know how?
Here is the relevant CSS that I'm using:
html{ // Sets the default font size
-webkit-font-smoothing: antialiased;
color: #999999;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.aboutText{ // Holds the un-affected font
float: left;
width: 280px;
line-height: 18px;
padding: 0px 20px 0px 20px;
}
.result{ // Holds the text made bigger with Text Booster
line-height: 18px;
color: 606060;
}
HTML:
<div class="spaceInner"></div>
<div class="mainText">
<div class="result">$post_article</div>
</div>
<div class="mainText">
<div class="aboutImg"></div>
<div class="aboutText"><?php echo $site_about; ?></div>
<div class="clearLeft"></div>
</div>
Any ideas why one font scales down but the other one "boosts" up?
UPDATE
I have found that float: left prevents Text Booster from changing the font size. I can't use float on my main text area, so is there another alternative???
Related
I have an html page which I print through different android devices. The height of the page is changing dynamically depending on some labels that I update through Javascript. Then I pass the height of the page to the android so I can set the height of the page that will be printed.(Dimensions are 856x3000ish pixels). My problem is that when I am trying to print the document from a bigger screen mobile device then the device pixel ratio is 200%-300% but when I am trying to print the same document from older smaller devices the ratio is 150%, so in every device(and on different browsers or same browsers with different zoom) the html page gets a different height. This has as a result the printer to behave differently depending on the different height. So for example: if I print from a device with 100% aspect ratio my print is perfect but if I print from a device that has 200% aspect ratio then my document is not printed properly and some centimeters at the end of it are not printed at all. I am pretty confident that the problem is the different aspect ratio of the different devices that make the height of the html page to change. How do I keep the same height of the html page no matter what the aspect ratio of the screen is? Any other suggestion is welcome.
#page {
margin: 5px 5px 5px 5px;
}
#font-face {
font-family: 'customFont';
src: url("../fonts/Roboto-Regular.ttf");
}
html {
transform-origin: center;
font-family: 'customFont';
line-height: 1.2em;
}
#mainBody {
height: 100%;
padding:0px !important;
margin:0px;
}
form {
font-size: 20px;
width: 840px;
padding-left: 5px;
padding-right: 5px;
border: 2px solid;
}
label {
border: hidden;
font-size: 18.5px;
vertical-align: middle;
}
Introduce the next line in the <head> of your html file:
<meta name="viewport" content="width=device-width, initial-scale=1">
Next you can add in css the value of "height": 100vh.
VH stands for “viewport height”. So you always keep 100% of the height no matter what device.
The content would remain dynamic in my example. But if you want just a fixed size no matter what device you have to work with px.
Hope this works for you.
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
I am working on a type of social network - unfortunately I cannot show anybody the website as somebody might steal the idea. Apologies for not trusting my comrades at Stack Overflow!
I have successfully been able to fix text getting bigger on Android browsers, but now a title gets smaller when the device is held vertically.
HTML:
<div class="title">
Lorem ipsum - that is all I remember
</div>
CSS:
.content .title {
font-size: 18pt;
font-weight: 300;
color: #1d2021;
padding: 0 0 45px 0;
text-align: center;
}
Thankyou comrades,
Foru
for better practice, use h1 tag instead of a div
EDIT:
You can still use media queries:
#media screen and (orientation:portrait){
// css when held vertically
}
So I'm developing a site that'll need to function across a multitude of browsers, be they desktop, mobile, or what have you. The designers, as mac designers will often do, have used Helvetica Neue as the font for the entire site. I'm trying to get it working via #font inclusion, and it's showing up just fine.. but the line-heights are giving me an ulcer.
See the below image, this is Arial, Helvetica Neue Std, and Helvetica Neue Pro. Windows Chrome handles all three like a champ, but the rest here are wildly inconsistent. They're all set to line-height 18px right now, I also tried line-height: 1, but to no avail.
The HTML/CSS I'm using for the purposes of this test:
<style type="text/css">
#font-face { font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); }
#font-face { font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); }
.box {
float: left;
padding: 10px;
border: 1px solid red;
font-size: 18px;
line-height: 18px;
}
.box .text_1 { font-family: Arial; }
.box .text_2 { font-family: "Helvetica Neue Std" }
.box .text_3 { font-family: "Helvetica Neue Pro" }
</style>
<div class="box">
<span class="text_1">Aw Nuts</span>
</div>
<div class="box">
<span class="text_2">Aw Nuts</span>
</div>
<div class="box">
<span class="text_3">Aw Nuts</span>
</div>
Am I just out of luck here? I'm considering just using Arial at this point, because trying to make toolbars and buttons where the text is vertically centered is proving to be a nightmare. I certainly don't want to sniff for OS and browser and write custom line-heights for every single element.
This looks like a vertival metrics issue. The font will never align right because it has poor vertical metrics. The only way to make the font render consistently across browsers is to fix its vertical metrics.
Most font providers allow you to update and fix vertical metrics for a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments, etc..
Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?
I can offer this in-depth background piece on why line height is a pain.
In summary, different browsers' ways of handling the vertical spacing metrics might be the cause of these inconsistencies. Some calculate from the top of the font's highest ascender and add all line space beneath, while others split the spacing before and after the line of text.
Please try this.
*{
margin: 0px;
padding: 0px;
font-size: 100%;
vertical-align: baseline;
}
font-size: 100% will automatically reset your fonts defaults and you need to manually specify font-size on p a div etc.
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>