getting really confused here now after googling for the last 40 mins. I need a definite answer.
Im making a webapp for ipod touch, iphone(all gens) it i will be run in full screen mode as a native app eventually.
however what i want to know is. what width: and height: do i set my wrapper to in the css.... i need the dimentions, i get 960wide, 320wide 640wide i get all confused, i just need a definite answer of how many pixels wide it should be and high in portrait mode.
thanks
The Dimensions should be
Width: 320 x Height: 480
source: http://en.wikipedia.org/wiki/IPhone
Could you not set it as a percentage and have it always fill the screen no matter the device used .. iPad, iPhone# etc.
For example:
.container {
width: 94%;
margin: 0 3%; /* Give it some space from the sides. */
min-height: 100%;
}
Something along those lines?
You would need to set your wrapper width to 320px for portrait mode, although the user will have the option to view the web app in landscape mode so if you can get away with using percentages (i.e. wrapper {width:100%}) you'll be better off.
Related
Am I missing something here? if I take my desktop browser and size it to emulate the media query, the background is fixed, and relative to the screen, and the body scrolls over top of it... but when I view that page on my iphone, the background now stretches the entire length of the body of the page. What is going on here?!
http://i930.photobucket.com/albums/ad149/xesvuli420/WTH_zpse6ed336b.png
As you can see, somethings wrong... but what is it? Heres the code I am using:
background:transparent url("../images/plan.jpg") no-repeat fixed center; background-size: 100% 100%;}
Ive tried substituting cover, contain, auto.. everything I can think of... Its hard because its right when you size down a browser.
Please hep me..
I am developing a fixed size HTML5 DOM-based game. It got animations and graphics naturally. It is fixed at 1000px x 620px but I cant make the game scale down proportionally for different sizes of devices. I fits nicely on iPad but I only see part of the game on iPhone for example.
I thought it was easy thing to do to just scale the whole thing down (inc. graphics) but I can't find a solution for that.
What are my options, right now I am thinking of 3 totally diffenct CSS with media queries one for iPad, iPad mini and iPhone. but its seem to be a lot of extra work to do.
Thanks for any help!
You could try iframing your page and using standard transforms to scale it to the size you need. It is probably better to make your game non height/width dependent, but this may work to fix the issue quickly:
iframe {
-ms-zoom: 0.25;
-transform: scale(0.25);
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
}
I'm having issues with this particular site not showing one of the backgrounds. I didn't design the site and it just got handed to me today.
But the URL is: http://musicalchairswc.com/
The CSS is:
div.body_wrapper {
background-image:url(img/big_bg_mod.jpg), url(img/bg_gradient.jpg);
background-repeat:no-repeat, repeat-y;
background-position: center -25px, center top;
}
But on an iPhone, the first background (img/big_bg_mod.jpg) doesn't show up. As far as my understanding goes - Mobile Safari now supports multiple backgrounds, yes?
Thanks beforehand for any pointers.
Read the fine documentation.
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15
The maximum decoded image size for JPEG is 32 megapixels using subsampling.
Here is the way I would approach it.
div.body_wrapper {
background-image:url(img/big_bg_mod_1-1.jpg), url(img/big_bg_mod_1-2.jpg), url(img/big_bg_mod_1-3.jpg), url(img/bg_gradient.jpg);
background-repeat:no-repeat, repeat-y;
background-position: center -25px, center 1000px, center 2000px, center top;
}
I split big_bg_mod.jpg (2320x1000, 2320x1000, 2320x320)
I try to display an app in external display, actually, it is a giant Iphone monitor (height is 1.5 m and wild is .5m ) and running into an issue. It is that my app is displayed in landscape mode with height is 320px and wild is 460px. However, in the giant iphone, my app is half of screen. How can I make it fit 1.5m x 0.5 m. Are there any ways to trick an system so that I can display a full screen in gian Iphone monitor even though the height and width of actual iphone is 320 and 460 respectively.
Please help if you have any ideas. All answer are welcomed here. Thanks
Be sure you scale your output appropriately for the external display. Something like this should get you on your way:
// if an external screen is attached it will be in the array of screens
if ( [[UIScreen screens] count] > 1 )
{
UIScreen *screen2 = [[UIScreen screens] objectAtIndex:1];
CGRect screenBounds = screen2.bounds;
NSLog(#"Should scale external output to fit in %dx%d",
(int)screenBounds.size.width,
(int)screenBounds.size.height);
}
There's lots of good information in Apple's View Programming Guide for iOS and the reference for UIScreen.
I guess it's worth mentioning that you are very unlikely to get any UI interaction (touch events, etc) from an external display. Most displays aren't touch displays and I'm don't believe touch events are even supported on an external display. So, any configuration of the information displayed on the external display will need to be controlled from the iOS device.
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)' : ')',