I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.
Related
I've just added the Facebook like box to www.glasgow.ac.uk/careers.
It seems to be working fine, except that photos are appearing stretched/distorted in the box (i.e. one at the moment is about twice the height it should be.)
We've changed from the default box width, but even at the default this was happening with our pictures. Is there any way to fix this?
Many thanks,
Jamie
Jamie:
Based on multiple examples, I have inferred the algorithm that Facebook are using to resize photos in the Like Box. It's unusual and it's not one that I would choose. I suspect that when they get a handle on what they're actually doing, they will change it.
But right now, as per my calculations, the only large photo size that will shrink without squeezing, is 170 x 320.
David
It should also be noted that the CSS that Facebook uses in the iframe has a max width of 120px set.
I'm looking to see if anyone has experience with this. I'm a developer first and a designer second, so this is really not my strongest suit.
I have a project I'm working on where the goal is to get image and text side-by-side in landscape mode on the iPhone. I'd like to be able to zoom in on the image using a pinch like normal, but not zoom in on the text as well while that is happening. I don't know if this is even possible or what kind of hacks it would take to get it working.
If someone thinks this is bad in general from a UI perspective, I am open to suggestions.
I have considered keeping two copies of the image (low and high res) and then swapping them out inside of div with an overflow: scroll; so users can get a zoomed version and then scroll around. It doesn't give you the full effect of zooming, but it might accomplish a similar goal. I don't know if this would work either.
If anyone has suggestions or experience on the subject, please chime in. Thank you!
To do this in mobile safari you would probably have to use javascript. Theres a jQuery plugin here: http://plugins.jquery.com/project/pinch
Might be of some help
If you want to use Mobile Safari, then you will need a touch framework like jTouch to simplify things.
Natively, you should put your image and text inside a UIScrollView, and return the image view in the the viewForZoomingInScrollView: (in the scroll view's delegates) to the image view.
Is that what you want?
Currently I'm trying to edit a login screen for a web based application. As of now, I have the login prompt (user & password) at a particular place on page so that it corresponds with the background image. Right now this image is set to 1024x768.
What I was wondering, is there a way to have the background automatically scale depending on users own resolution while have the login appear at the correct location? I'm not sure if this is possible but thought someone might have some advice.
I've made a jsFiddle solution that can come in handy:
Click here to see background-resizing at work
It works with jQuery, and I've commented most code so you can understand how it works. You compare the aspect ratio of the image and the browserwindow, look at the difference and then resize the width or height, based on how the aspect ratio's are comparing. The css is also worth a look.
I tested it in Firefox and IE(7/8), but jsFiddle resizing is a bit buggy in IE.
Good luck!
Update:
I've made an updated jsFiddle here.
In this scenario, the message box (in your case the loginbox) is positioned absolute with percentual offset to the top and right. I also gave it percentual width/height, although that might not be neccesary/wanted. But you can tweak this to see how the box behaves with different window sizes.
I am using the Jquery/Jqtouch libraries for an iphone compatible site. I am now stuck with a problem just in iPhone 4 (not in 2g, 3g or 3gs) where the text becomes blurry on one specific scenario. Below is how it happens
The site has one common div container.
<div id="container"></div>
The container is filled with content dynamically based on the user action. Below is the function that does that.
function loadPage(url, section, callback) {
$('#container').empty();
$('#container').load(url + ' ' + section, loadComplete(section));
}
One sample call to the above function
loadPage("Data.htm", "#Friends", null);
Basicaly eveything works fine except on one scenario where the amount the data on the container is huge (ie the #container height increases to 1500px+ not predictable). Now if i replace it with smaller data for different tabs on the same container then the text becomes blurry. Attached is the image
http://i.stack.imgur.com/XE9q4.png
Did anyone come across this scenario. Thanks in advance.
Try closing all your running apps besides safari. It sounds crazy but we have the same problem on the ipad and it just seems to be running out of memory at some point. Closing all the apps stops it. Other thing that seems to make a difference is -webkit-overflow-scrolling:touch, if it doesnt have this property then it doesnt seem to have the problem described.
i was able to fix this by applying the same settings to reduce flicker on the element in webkit browsers:
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Graphics elements must be "aligned" with the pixels on the screen; coordinates must always expressed as integral values and not floating values. If not, the subpixel rendering engine of the GPU would make it blurry, which is not a problem with animation but definitely one with static images.
In the native SDK, we have to make sure everything is aligned (such as using CGRectMakeIntegral()).
Since you're using a web framework, it's more difficult to tell how to exactly how fix the problem, but I would try to adjust the sizes of your to a precise size and not let the framework figure it out.
What content do you load? Images? Text? There's an internal limit on image sizes for the iPhone (about 4 Megapixels or so). It looks like the phone is trying to reduce the memory load of your website and reduces the resolution to non-retina values.
I can't say more without you posting code.
This is a shot in the dark, but have you aset your sizes using pt values for your block elements, and em for your text?
The iphone4 resizes your content to fit its higher-res Retina display (compared to the older iphone), and with that scaling i have sometimes noticed blur when using pixel values for block height, width, font size, etc.
Very hard to diagnose without seeing the actual code, but could be the issue.
In my case it was CSS
-webkit-transform: translateZ(0);
applied to one of the elements in body. So as Ariejan said, it's removing transition property that fixes it.
body{ text-rendering: optimizeLegibility}
could solve this issue, worth a shot if you haven't included it already
Sometimes, Text blurry may be cause of the iScroll Plugin. Did you use this?
Try to comment
trnOpen = 'translate' + (has3d ? '3d(' : '('),
trnClose = has3d ? ',0)' : ')',
I'm displaying a PDF file using UIWebView, and I want to do 2 things:
I want to make the page fit the phone screen without the user has to double tap to do that
I want to remove the margin with gray shadow around the displayed PDF
Thanks for helping
I don't think this will help much, but I think your best option is to render the PDF to an image (of decent DPI) and show the image instead. I do this for an app, but we do that server side using ImageMagick - don't know how you might do that in obj-c. Also note that a mostly-text PDF will be much larger (filesize) when rasterized.
However, you might also try to embed the PDF in HTML page and load that HTML in the WebView - that may at least avoid the gray border/artboard.
webView.transform = CGAffineTransformScale( webView.transform, 1.25, 1.25 );
2 - Checking the Scale Pages to Fit box in IB sorted this for me
I would also like to know the answer to 1.
I guess you want to know how to display the PDF in the same way as when opening as attachment in mail, where the navigation bar only appears on a tap and the status bar also disappears?
You can also use Quartz to do it, as explained here : http://developer.apple.com/iphone/library/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_pdf/dq_pdf.html
Where has CGAFFineTransformScale been all my life?
Seriously, that is a big help. However, it worked better applying it to webView.scrollView.
Finally, is there a similar command to change the offset of the content as well as the scale?