I'm seeing strange behavior on an iphone 4s device when it comes to specifying sizes of a div in pixel units.
My iphone is 980 pixels wide in portrait orientation.
As a first test, I just created a plain html implementation. This works exactly as expected - the div takes up the entire width of my screen, but is no wider:
<body>
<div style="width:980px; height: 30px; background-color: red;"></div>
</body>
Now in GWT, I try the same thing (at least I think it's equivalent):
FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);
but when loaded on my iphone, the div appears to be twice the width of the screen. Is GWT doing some kind of scaling automatically? I know the iphone 4S is a retina display, therefore it has a 2x pixel ratio. Is it something related to that?
I can't examine the output html on my iphone, but when I look at the GWT version in firefox, I can see GWT is indeed outputting the 980px size I specified:
// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>
So why would the GWT version render the div 2x as wide?
------ Update ----------
As Woojah recommended, I tried via a style definition:
.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}
FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");
but still the same behavior - on the iphone 4s screen, the div is twice the width of the display. The dom looks exactly the same as in my handwritten version. The size behaves correctly on a non-retina device.
Thank you
I would recommmend you try the following:
do:
getElement().getStyle.setWidth(x, Style.Unit.PX);
getElement().getStyle.setHeight(y, Style.Unit.PX);
That is the equivalent for your
style="width:980px; height: 30px; background-color: red;
Another alternative is to defina inside your css stylesheed a class like
.yourCss
{
width:980px; height: 30px; background-color: red;
}
and then in your code do flowPanel.setStyleName("yourCss");
Related
I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
I'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
I'm trying to animate a DIV using CSS3 transitions. The example DIV is:
HTML:
<div class="element"></div>
CSS:
.element {
-webkit-transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 2s linear, width 2s linear;
position: absolute;
left: 100px; top: 100px;
height: 10px; width: 50px;
background-color: black;
}
This means that the DIV occupies a region in its container from (100px, 100px) to (150px, 110px) - and the right edge is fixed at 150px.
I would like the DIV to maintain a static right edge at 150px whilst I translate the left edge off the screen, so I've been applying (via Javascript) a transition class to the DIV like so:
CSS:
.transition {
-webkit-transform: translate3d(-200px, 0, 0);
width: 150px;
}
The issue that I'm seeing is that the transition on the width does not keep up with the left edge of the translated DIV, so instead of increasing uniformly in size and left position, the right edge position fluctuates as the DIV slides off at a different rate, flickering slightly (depends on platform how much it flickers).
The issue occurs more vividly on Mobile Safari (a Phonegap webview on the iPhone is my main development platform), rather than on Chrome.
I've put a JSFiddle at http://jsfiddle.net/XwuBz/ which demos it (view it on an iPhone to see it occurring).
Is there another way to achieve this end result?
Thanks in advance,
Dan
Well, it seems that iOS Safari has some weird issues with transitions / transform.
I tried to achieve the same results with jQuery only, and it worked on iPhone 4s, iOS6:
$('.element').animate({left:'-=200','width':'+=200'},2000);
Here is a demo.
I have a page containing an empty div with a gradient in it, like this:
<div class="prodGradientArea"></div>
.prodGradientArea {
background: -moz-linear-gradient(center bottom , #ECEAE9 0%, #E4E3E2 50%) repeat scroll 0 0 transparent;
display: inline-block;
float: left;
height: 10px;
width: 420px;
}
This looks brilliant in FF, IE, Chrome and Safari ... on a computer. When checked in Safari on an iPad or iPhone, I get a tiny border around the div. This is removed if I write text in the box or if I zoom in a lot but not if I write a non-breaking white space. I have even tried putting in a transparent pixel with but it made no difference to the imaginary border. Also tried setting border=0 but this was of course not the problem (it is not a real border, just a visual "feature").
So the only thing that removes it is to add pure text. I guess I can add a dot and hide it with color or so but it would break my little heart to make such an ugly fix.
Please help!
Jenny
Insert in your index.php this code in the <head>-area to avoid artifacts from bad zoom interpretation of iOS:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
Then go to your css-file and insert a 1px negative margin, to avoid this. In my website this was the footer div:
.unten {
margin-top: -1px;
}
I hope this will help you, too!
I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!