skaterdav85 Posted February 9, 2011 Share Posted February 9, 2011 I'm developing a mobile site and I am using http://www.testiphone.com/ to test it since I don't have an iphone. However, the meta viewport tag isn't rendering as expected. The site displays huge with both horizontal and vertical scrollbars. Maybe I am misunderstanding the use of this tag, or maybe that site isn't an accurate simulator of the iphone. Can someone tell me what I am doing wrong because at this point I have no idea. I thought the meta/viewport tag was supposed to scale it down to the the device width...my meta/viewport tag <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" /> the 2 pages im developing:http://www.rocketxl.com/jarritos/mobile/http://www.rocketxl.com/jarritos/mobile/stores Link to comment Share on other sites More sharing options...
Synook Posted February 10, 2011 Share Posted February 10, 2011 The TestiPhone site does not actually simulate the iPhone in any way - it just presents an HTML iframe sized to be similar to that of the iPhone. It does not do anything else, not even user agent spoofing, to attempt to trigger a iPhone-like rendering, and it definitely can't understand the viewport meta tags. Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 10, 2011 Author Share Posted February 10, 2011 well it shows up fine in the iPhoney simulator (http://www.tuaw.com/2007/06/21/iphoney-iphone-web-simulator/)can you comment on the accuracy of this app? my only problem with this is that the clickable area for each button is not directly on each button. the clickable area is slightly beneath each button. i know this is a lot to ask but would someone mind pulling either link up on their iphone and tell me if it looks way zoomed in or if it looks as one would expect? i'd really appreciate it. Link to comment Share on other sites More sharing options...
Synook Posted February 10, 2011 Share Posted February 10, 2011 I have a device running Android, but I get served the "generic mobile" edition, which is a bit big for my screen (800 * 480). Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 10, 2011 Author Share Posted February 10, 2011 There is a generic mobile edition of 800 x 480 px? Link to comment Share on other sites More sharing options...
Synook Posted February 10, 2011 Share Posted February 10, 2011 I mean, when I navigate to the website using the browser on my phone, running Android, I see the "generic mobile" edition of the website. It's just a bit too wide when in landscape, but gets really bad when viewed vertically. Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 10, 2011 Author Share Posted February 10, 2011 I wonder if the Android browser doesn't support that meta/viewport tag... It seems the Android browser uses webkit just like Safari.Do you think i went about developing the site correctly, meaning, taking the PS mockup which was 640p x 960px, cutting it up, writing the html/css, and then having the phone's browser auto-fit it to the screen? or was i supposed to shrink the PS comp and make everything really small? Link to comment Share on other sites More sharing options...
Synook Posted February 10, 2011 Share Posted February 10, 2011 No, the meta tags are working fine - I can't zoom in or out. The page is just simply too big for the browser window. Oh, reading your initial post, I didn't think the viewport metas auto-scale the content - in fact, I believe they prevent the page from scaling to fit and force everything to display at 100%. You'll have to use some other code to scale the images and all (I think). You may be interested in how the site http://hicksdesign.co.uk/ is designed (try resizing). Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 10, 2011 Author Share Posted February 10, 2011 oh wait, the stores page was not scalable because i had user-scalable=no in the content attribute. i removed that now. does the main page still display too large?interesting link. everything scales. even the images. Link to comment Share on other sites More sharing options...
Synook Posted February 10, 2011 Share Posted February 10, 2011 It does sort of scale now, but I can zoom. Also, if I go landscape I get wide gaps at the side.Slightly related, due to the large amount of images the page doesn't act very responsively on my device. Link to comment Share on other sites More sharing options...
skaterdav85 Posted February 10, 2011 Author Share Posted February 10, 2011 hopefully i can figure out why it doesn't display at the proper zoom level =/. now i can see why mobile web development is a challenge.i figured the images would be a problem. i dont think the designer of the comp kept performance in mind and just created a design that looked spiffy, and i couldnt recreate a lot of the effects in css. i imagine you can do quite a lot in css3, but I have barely touched the surface of that and am not confident in making a page that looks close to the comp with css3. the background image wasn't something that i could take a slice of and repeat so it is one large image. definitely not efficient. im not sure if i should bring it up or not. that would mean a lot of re-work for the designer and myself and it would delay the schedule. Link to comment Share on other sites More sharing options...
skaterdav85 Posted March 2, 2011 Author Share Posted March 2, 2011 so i finally got the site to work on iOS. The meta viewport tag was working. I think I just had to clear my cache. Anyways, now it is zoomed in too much on the Android Browser, but only on some devices I think. I tried it on my friend's phone and he has Android 2.1 and it shows up ok, but it shows up zoomed in too much on the emulator using 2.1 and my phone which is 1.5. Any idea of why the inconsistencies? My meta-viewport tag is: <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" /> My link is: http://itphosting1.com/dtang/jarritos/Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.