I've added some media queries to my site here, which show correctly when I minimize the browser's window to the smallest size. Though unfortunately, when I navigate to one of the internal pages, the original design shows on the iPhone. When testing it in my browser, the site works properly regardless of what page I'm on.
Note: To test, minimize your browser to the smallest width which will show the "mobile site" that they wanted.
I'm completely stumped here. Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
Thanks!
Make sure you include a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Could someone please point me in the direction as to why the iPhone seems to be loading old CSS while the browser itself is loading the current CSS?
You probably answer your own question. This definitely seems like a caching issue because I see the same site on both my mobile and desktop browser.
Try clearing your mobile browser's cache. If you use Safari, go to Settings > Safari > Clear cookies and data. If you use Chrome, or any other 3rd party browser, you can usually clear local files under the in-app settings page.
Related
I developed this website
It looks fine on most browsers and OSes on PCs. It even looks nice on my HTC with Opera Mobile. Unfortunately I keep getting reports about how it displays on iphones. I don't have an iphone so here are my questions:
Is there an easy way to reliably check (emulate) my website on iphone (I tried sites like this
but what this site does it opens iframe in safari trying to emulate ihopne native screen size, but the problem is somewhere else...)?
Any quick tips on obvious mistakes I made?
Thanks for help
If you have got a computer with MacOS installed (it could even be a hackintosh), you can install Xcode there and then run the iPhone simulator from it. Once you are there, you can open Safari in the simulator and enter your site URL to have a look.
I am also attaching a snapshot of the simulator with your home page.
You might try defining the viewport in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Also, have a look at the other meta tags available in Mobile Safari.
I partially found the answer. As it turned out most mobile browsers (including safari for iphone and default browser in samsung galaxy) don't support
{ background: transparent;}
So I need to provide fallback colour as described here: http://css-tricks.com/rgba-browser-support/
I have learnt some basics about developing iOS apps and curious to learn more. I recently came across the way websites are displayed on mobile and was willing to know as to are there are particular design patterns/methods supporting it. I tried opening walmart.com on mobile which gives same display of the website as on the screen, but if I open homedepot.com; the view I get on mobile is an optimized one.
How does this work? How do I get same/optimized display for different devices i.e. desktop screen, ipad or iphone??
There are several ways:
use the browser agent information and serve the customized files (html, css, js, etc) for that client (Generally, not recommended)
use the browser agent or screen-width to redirect to a mobile-specific site (what a lot of sites do; relatively easy)
do responsive design, which essentially uses screen-widths and css to custom the display of a site, This also has a nice side effect of responding to window resizes for a desktop browser. But this method requires more work than a mobile-specific site.
Any of the methods above usually require some mobile-specific things, such as meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells the mobile browser to set the page width to that of the screen, and prevent zooming.
For responsive design, you can use a css framework like 320-and-up to help. It's also a good reference to see how various mobile stuff can be done.
For a mobile-specific site, something like jquery-mobile can help a lot.
You can detect the type of browser that's loading your page and redirect to your mobile-optimized URL. You should probably make both the mobile-optimized and the full version of the site accessible to mobile users (see: www.progressive.com).
Google something like "iphone optimized website tutorial" to learn how.
I made this website: Kansvoedingsadvies.nl with Wordpress. Now that I'm visiting the site with a mobile device (iPad and iPhone) I see that I am not able to zoom in or out. I have search on google for some anwsers but I didn't find anything there.
Is there someone who can help me?
It's because of the following line:
<meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
It basically says the size cannot be bigger or smaller than 1. Read this for more information: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Although I haven't checked your code out in detail, it is probably related to the viewport meta tag in your HTML. Take a look here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html (viewport).
I am working with a website that works well in most browsers (all I have tested) but in iPhone (4) with ios5 it doesn't look that nice.
It somehow cut appr 80-100 px off the website's right part, and thus hide text and images.
How can I set this website to force iPhone (and iPads) to show all?
The width is 1030 px. Usually I see that iPhone then "zoom" the webpage to fit the screen, but somehow not this.
Here is the site
I have been fooling around with the css to see if it helps, but now I haven't found it.
Any idea?
Do I need to use some javascript, or should I modify the design somehow?
PS: I am not looking into making a "mobile website" right now, just get the current website to show all in iPhones etc.
#Jeroen had the best answer in my situation:
<meta name="viewport" content="width=1030, maximum-scale=1.0" />
As Jeroen didn't submit as an answer I post it here as the answer :-)
I put the above meta in my website's , and it worked like a charm! Thank you Jeroen
A couple of solutions:
1) I would try media queries to specifically target smaller devices, see here: http://www.alistapart.com/articles/responsive-web-design/
2) Alternatively you could target iOS devices directly, try this solution: Loading JS script for only iOS devices?
The usual solution to this kind of problems is to create different stylesheets for different browsers. Do some research to know from where is the user connecting (IE, chrome, ipad, etc) and bind css accordingly.
I'm going to create a website, which is meant to be opened from mobile phones including iphones. The website may be containing different contents such as Javascript widgets, flash content, images, texts, dropboxes, etc. The website is being built using XHTML and Javascript. What are the common issues that safari faces while opening such a website pls give your suggestions.
Mobile Safari does not support Flash. Other than that it will cope with anything that a modern desktop browser will cope with.
However, 'coping with' is not the same as 'optimised for'. There are various things you can do to optimise your content for Mobile Safari from a very simple hint about the initial viewport width:
< meta name="viewport" content="width=800" / >
to a separate CSS style sheet, to completely different content using native Mobile Safari widgets and interaction.
I suggest doing a search for 'optimizing for Mobile Safari'. Apple also has a huge amount of resources.
I have not yet come across any issues that aren't a problem in other good browsers (all except IE). But remember flash does not work, look up http://raphaeljs.com/ for a javascript and canvas tag based alternative.
Personally I'd just get into it and attack any issues if they come up.