I am HTML/CSS/jQuery coder. And I need to develop the website, which will be "zoomed-out" or "fitted" to 320x480 (frequently used resolution) Android mobile device screen.
Or even this solutions should check my screen resolution and connect the right CSS for that.
Somewhere I met that there is android.js file, which connects to HTML and recognizes if the website was open on PC or on android device. But I am not sure at all. I didn't do anything for mobiles before.
Found this article: http://blog.mgpwr.co.uk/2010/09/make-your-website-iphone-compatible/
Don't think it's a right solution to use PHP for that.
Better would be HTML or JS.
A very simple answer would be don't hardcode width on the elements and don't specify font size in pixels. The mobile browser will adjust the rendered page itself.
If however you want more iPhone-like look of form controls like radio buttons, buttons, drop downs, then you need to use the mobile javascript libraries outlined in the other answer.
A simple answer would be a mobile javascript library such as one of the following:
http://www.sencha.com/products/touch/
http://www.phonegap.com/home/
http://jquerymobile.com/
http://jqtouch.com/
Related
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 wonder what the best solution is to store and browse static html pages with javascript, images and movie clips on both iPad and Android tablets?
The content is a product catalog and is rather large, about 2GB in size, and the idea is to be able to browse it offline.
According to this Android SE question, it should be possible on android with the built-in browser, however, according to this SO question it seems like it's not doable on iOs.
I've also seen suggestions on making an application of html content using PhoneGap, but I'm not familiar with it so I can't tell if it actually is an alternative.
How would you do it?
Update: The package size is about 3,5GB (not 2 as mentioned above)
Try the jquery API I hope there is a option to do operations like this
Hi I am developing a site for desktop.The site renders the contents for desktop size.But when I see it in mobile the content is not properly rendered.
How can I make a site that fits all mobile screen sizes say Blackberry,Android,iPhone, etc. Can anybody mention any articles. I know only HTML. Thanks in advance.
I remember looking into myself a while ago and finding this video tutorial on net-tuts+ to be a good starting point
It is hard to make a single site that looks good on both mobile and desktop. Resolution is not the only problem, the very way the user interacts with you site changes on a mobile device. That said, the typical thing to do is to have a mobile style sheet which is loaded for mobile, and a desktop sheet for desktop. You might even go so far as to limit some of your content on mobile to make the page lighter.
I found http://mobiforge.com to be a good source of info.
I have a software that eventually will have some reports to be accessed via iPhone.
Once I am not willing to develop an iPhone app, I´d like to make these reports accessible via iPhone Safari browsers.
GMail in iPad uses HTML 5, so I guess I can do the same.
My question is where can I find some resources to learn best practices doing so and how can I test it in a PC computer.
Thanks
Here is a similar answer I've given: Exclusive CSS for iPhone/Android
For testing you can use Chrome or Safari, as they are both webkit browsers (which is what the iPhone uses). Safari can even render as the iPhone user agent.
Hope this helps.
Please take a look at PhoneGap, I think that is what you are looking for.
You can emulate the program in xCode, but you will need an Apple for that. For PhoneGap also..
From the app architecture view-point you should also consider introducing app-specific optimization such us:
Simplify the app (show only what you need for mobile)
Minimize Application and Data Size
Aggregate Images into a Single Composite Resource (Sprites)
Include Background Images Inline in CSS Style Sheets
Keep DOM Size Reasonable
Ensure Paragraph Text Flows
Avoid Redirects
I've been using Safari on Windows and the iBBDemo Blackbaud iPhone Browser Simulator to emulate an iPhone but I have noticed that Safari does not render form elements using the default control styles. Safari on iPhone supplies default control styles that are specific to iPhone. This means my web forms look nothing like they do on an actual iPhone.
Are there any style sheets or iPhone Web Design Tool Kits that will style the form elements exactly as they should appear? Or is there an online service that provides screenshots of how a web page looks on an iPhone?
If you have a Mac, then the easiest way is to use the iPhone Simulator. It might not be suitable for your purposes, though.
There are a lot of things which you'd need to do to get the rendering right (there are a lot of rounded rects, and the user can scale the page to an arbitrary size, and strange things sometimes happen when you rotate the device).