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
}
Related
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'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???
I like to build horizontally laid out, vertically-fitted image galleries like this:
<html style="height: 100%">
<body style="height: 100%">
<div class="someContainer" style="height: 100%">
<div class="galleryContaineer" style="height: 100%; white-space: nowrap;">
<img width="1000" height="2000" style="max-height: 90%; width: auto; height: auto" />
...
</div>
</div>
</body>
</html>
This seemed to be fairly well supported... Well, until i tried it on Firefox for Android (31.0 on 4.4.4). Which probably no one uses.
Apparently the nowrap causes Firefox to compute the body's height way to big, which kills the vertical-fitting. Consider this fiddle: http://jsfiddle.net/W5a6V/7/ which you might have to open unwrapped http://fiddle.jshell.net/W5a6V/7/show/ (if this link ends up dead, just inspect the proper fiddle and open the result iframe's src in a new tab) because the iframe somehow fixes this mess.
Sorry #jsfiddle for a whole bunch of binary :) — alternatives welcome.
After a couple of hours I resorted to a technique which I gave up for the less CSS-heave approach shown above.
You have to force Firefox to limit the body's height to the actual viewport's height, which can be done with media queries, like this:
#media screen and (min-device-height: 0px) { body { max-height: 0px; } }
#media screen and (min-device-height: 100px) { body { max-height: 100px; } }
#media screen and (min-device-height: 200px) { body { max-height: 200px; } }
And so on. I guess there is a cool name for this. It's pretty robust and helped me in circumstances where the imgs had to be individually wrapped in some kind of container, too, think captions.
If one of your containers is positioned absolutely, you might have to apply the max-height to it, instead of the body.
While I fixed this - see answer below - other ideas are highly appreciated.
Here's the fiddle: http://jsfiddle.net/W5a6V/9/ and http://fiddle.jshell.net/W5a6V/9/show/ respectively.
Update: Forgot to check back in Webkitland... where it does break the original layout. Gotta target Firefox by adding and (-moz-touch-enabled: 1) to the media query. Yuck!
Short and painless, I've tried many ways to get an element, e.g. info text, absolutely centered (H/V) without using divs, Javascript, jQuery or whatsoever.
The problem is not getting this to work and there are many different ways, but I'm losing my hair trying to get it cross-browser-compatible.
And it should be so simple.
For example, in the following scenario, FF21 interprets a margin-top of 50% as 100% for no logical reason. (Mobile devices don't, though).
I'm using <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />
Relevant CSS:
body {
margin: 50% 0 0;
padding: 0;
border: 0;
display: block;
vertical-align: middle; /* removing this made no real difference at all */
font-family: Helvetica, Arial, MS Sans Serif;
font-size: 11pt;
text-align:center;
background-color: rgb(10, 50, 100);
color: #ddd;
}
Notes:
In Firefox, the expected vertical centering is set with a margin-top of 25% (which looks wrong in mobile browsers, then again).
Using HTML5
Trying to AVOID any form of script and precalculated, negative margins. The browser is supposed to center properly, as you request it to.
JS-Fiddle: http://jsfiddle.net/sfaVg/
Without an element containing the text, i doubt you will be able to position it dead center like you wish. Once you write proper markup (put the paragraph in a <p> where it belongs, for instance) it is quite possible though, with the following css;
p {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Also make sure its container (body in your case) gets display: table; and 100% width/height
Demo at http://jsfiddle.net/sfaVg/3/
Also, a bonus alternative method (requires two containers) can be found at http://zoffix.com/new/absolute-center-random-width-height.html
A third solution, for when you know the dimensions of what you're centering: http://reisio.com/examples/deadcenter/
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/