[Done]iPhone version of site not displaying as intended

[jasnick]

Using 1.11.8
Trying to make an existing web site look good on iPhone.
On Android it looks just the same as the computer version. Also Opera browser on my android phone is perfect. On iPhone client tells me it is huge showing only a portion of the site.
So have spent the last few days reading up on the subject. Have looked at separate templates and css but though that media queries was the way to go.
In Global Settings I have: (Safari suggests this).

Code: Select all

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

In css I have:

Code: Select all

@media screen and (max-width: 480px) {  styles} 

In the styles I have a copy of the css of the site with various things {display: none;} such as the background image, slideshow, sidebar and so on and the main divs I have given {width: 100%;} so its basically one column. I have reduced margins and padding and increased some text sizes especially for the navigation.
On my android it now looks pared down and fine, even a page of images looks good in one column.
In Opera on the android, it still looks exactly like the computer version. Its not picking up the @media part of the css.
iPhone my client tells me the text is not displaying properly - not in the correct order.
Am I doing it correctly? Is there a better way? I am thinking in future I will go back to doing fluid designs instead of fixed width. Surely there must be a way of targeting all small devices at the same time?
Any ideas would be appreciated.
Thanks

[velden]

A link to the site would probably say more than 1000 words.

[jasnick]

Of course

http://americanmotorcycles.com.au

Sorry

[velden]

Using Firefox -> Tools -> Webdeveloper -> Responsive Design View (not sure if that's default available in Firefox) and narrow the viewport. You will see what you're iPhone user sees.

I think I once used a fixed width on the viewport content:

Code: Select all

 <meta name="viewport" content="width=980px; initial-scale=1.0 />

to make the site look decent on 'all' smartphones.

However, if your goal is to let it look different on smaller screens that is not the way to go.

[jasnick]

Hi velden

Using Firefox -> Tools -> Webdeveloper -> Responsive Design View (not sure if that's default available in Firefox) and narrow the viewport. You will see what you're iPhone user sees.

I don't think I've ever actually looked at that Options section of Webdeveloper.I use Resize a lot and Tools. How does the Responsive bit work?

I think I once used a fixed width on the viewport content:

Code: Select all

 <meta name="viewport" content="width=980px; initial-scale=1.0 />

to make the site look decent on 'all' smartphones.

I'll try that tomorrow when the client can look at his phone for me.

However, if your goal is to let it look different on smaller screens that is not the way to go.

I am not fussed which way I go as long as the site is useable on all phones.
I don't see why it should be so difficult to achieve this on an iPhone when it is OK on an android. I am trying it with Media Queries to make a pared down version as the full website doesn't work on iPhone at the moment. I would be quite happy just to use the current website on all devices if I could get it to work on iPhone.
Thanks for looking!
BTW I am using an application called ProtoFluid which shows how the page looks in various size devices. It can be edited on the fly to show changes to the css etc. Not sure why my client can't see what I can see

[velden]

Have a look at www.browserstack.com
It has a free trail. After that a subscription of 19$ a month which can be stopped each month.

I recently used it (and now suspended it) for just this purpose. I don't want to ask the client after every change to check this, and check that...

[jasnick]

Thanks velden - I'll give that a go tomorrow.

Have you seen this: http://www.i-do-this.com/blog/14/15/Mak ... bile-ready

[jasnick]

I tried Browserstack - it showed what client was describing and I realised it was some text that was too big so I adjusted it and now it looks OK - at least according to Browserstack. So I think it might just be a case of going through the css and adjusting sizing.

[Dr.CSS]

I use Responsinator to check sites..

http://www.responsinator.com/?url=http% ... .com.au%2F

You may want to add some more @media sizes...

[jasnick]

Dr.CSS
Thank you! What a fantastic resource! I'm surprised i didn't come across it during my searches of the last few days.

You may want to add some more @media sizes...

Yes, indeed! I need to cover landscape versions and tablets too I suppose.
That is one thing I am not too clear on.
Currently I am using:

Code: Select all

@media only screen and (max-width: 480px) {my amended css}

So how do I add another for example:

Code: Select all

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

Does it mean I have to add the {my amended css} bit again for each @media?
Thanks!

[jasnick]

I'm using 2 media queries:

Code: Select all

@media screen and (min-width: 320px) and (max-width: 700px)

Code: Select all

@media screen and (min-width: 768px) and (max-width: 1024px)

with a few changes to the CSS re text size and so on.
Using Responsinator and also Web Developer/Responsive Layouts to check how the site looks.
Problem is it looks OK to me on my computer with the above check sites, and on my Android as well, but client (iPhone5) tells me his images are still way to big for the phone screen.
Have put

Code: Select all

 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />  

in Global Settings.
Related to this issue, how is JQuery Lightbox targeted as its images are not responsive anywhere.
Have been trying to get this right for a couple of weeks now and am making no headway at all.
Thanks

[Dr.CSS]

I found out that the Album template I had for jQery lightbox wasn't responsive so I found a different one and Cycle2 which is responsive...

If you look at the style sheets you will see all of my @media calls are in one style sheet attached to the page template last, still haven't quite got the second drop menu to work, it still shows second level UL on hover...

This is what I use for iphone etc..

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

http://themes.multiintech.com/

2 Column Left has responsive lightbox type Album, One Column has Cycle2 Album...

[jasnick]

Dr.CSS - thank you so much - I like the look of the 2-col - I will use that in future! I appreciate the help!

[jasnick]

An update: I consulted Dr.CSS who revamped my templates and media queries and got the site looking really good and working well EXCEPT for the display on the iPhone.
After making myriad changes and going back and forth with the client checking on his iPhone it was obvious that the problem lay with CGSmartImages.
The site finally looked as intended on the iPhone only after reverting back to the usual img src code and doing away with CGSmartImage entirely.
This of course defeats my purpose in using it as the client wants to upload images from his camera which will be very large.

I will add that this issue only seems to occur with iPhones and not Androids.

I am very surprised no-one has come across an instance like this before. If anyone has, I would like to know how they overcame the problem.

[jasnick]

I have marked this post Done, even though not solved. Dr.CSS made the site much more responsive and so I am not using CGSmartImage as this conflicted with the display of images on iPhone.