I have a site where it is targeted to be used on different mobile devices. How I can set my site to adjust its width according to the device width on iPhone android, etc.. using css and Java script
tnx
Add this to html and adjust parameters.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
More info on how to use Safari and iOS specific HTML tagshttp://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/usingtheviewport/usingtheviewport.html
Sounds like responsive design!
Have a look at some of the examples here: http://mediaqueri.es/, using media queries in their css to change the look of the site depending on browser width.
Related
I've been having trouble for quite some time. I need to get the canvas working on a mobile web app of mine but it seems to be having trouble with paper.js.
I have set my viewport to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
And the canvas element:
<canvas id="canvas" resize="true"></canvas>
But the canvas never seems to render at ALL.
I hope I've given enough information. I'm almost certain that I have no problems from the JavaScript side.
Go easy on me please!
Thanks
Did you know it's possible to debug javascript issues by stepping through your code running on the iphone in safari using safari on your mac?
Usually when I run into issues like this, it saves me!
Here's a link that will help you do this: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
If you would like to learn more about paperjs, check out this screencast I created: http://tagtree.tv/canvas-with-paper-js
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 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 have a question for which I couldn't find answer neither in google or directly at apple developer forum.
What is the exact difference between:
<meta name="apple-touch-fullscreen" content="yes" />
and
<meta name="apple-mobile-web-app-capable" content="yes" />
?
They behave the same way, at least for now. apple-mobile-web-app-capable is the only version mentioned in Safari documentation, so I would stick with it. It looks to me as if apple-touch-fullscreen was used in early demos/previews, so it was left working later when the SDK got actually released, but the preferred version is the one documented.
Now I've seen loads of websites that look great on the iphone, such as http://twitter.com and http://deviantart.com however I can't for the life of me get the right structure within my mobile web application to make it show up as if it was an iphone application.
I've discovered iphone jquery ( http://jqtouch.com ) which seems to be the most promising javascript lib for developing nice effects to make everything look authentic. However I'm still having issues with getting the website to fill the screen on iphone safari.
I can never find any resourceful websites that actually explain how to get the effect of having it fully zoomed in and filling the screen.
Are there any libraries that help develop websites for mobile devices such as iphones.
To run fullscreen the webpage needs to be run as a webapp (bookmaked on the homescreen). You also need to indicate in your HTML that it is a web app.
Taken from this website :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
The one I've used this in the past is the iui library and it worked well for my case. The example code makes it pretty easy to understand.
Or checkout JQTouch. You can get up and running very quickly.