EDITED: Let me expand the scope of this question to browser capabilities wrt HTML5 and Javascript on destop vs mobile platforms. The original question is below.
What's the difference in the capabilities b/w Chrome for desktop (Mac/Windows/Linux) and that for mobile (Android/iOS). For example, look at a Google Apps spreadsheet on your tablet vs on your desktop and you see that the mobile version seems "limited"? The surface area is limited for phones admittedly but why serve up mobile version for a tablet? What are those limitations (forget extensions when answering this question).
The differences are decided by every website, "what are the diff..." can't be answered in general.
Your browser tells the website User-agent string, which allows the website to decide if it wants to serve a mobile version, that is typically reduced in features. Often there's a link in the footer or so, that lets you switch back to the desktop version.
Also, most today's mobile browsers have a setting like "desktop version". This changes the user agent string to something that makes websites think it's a desktop browser.
Related
I am developing a website in a Windows system. I have Firefox and Chrome browsers installed. When I checked the responsiveness of my webpage by setting the device as iPad(768 X 1024) using 'inspect element' feature in these browsers, I could get different resultant UI for same device. Why is it so? On which browser can I rely on as I don't have any Mac/Apple devices with me to test? I am concerned of using other online web tools due to security issues. Please help. Thanks in advance.
There's a tool for checking responsiveness called browserstack. You can try it from here: https://www.browserstack.com. They're offering free trial.
Unfortunately there's no real substitute for device testing. Companies like BrowserStack offer real remote device testing but at a cost. With regard to browsers rendering differently, this has always been a pain. Look at CSS resets.
I am building a website which detects the target browser whether it is mobile or pc browser. Based on the content it choose theme.
What I want to ask is. Is there any mobile browser which I can download in my pc to test my site instead of on phone many times?
You could change the user agent to an user agent from a mobile browser. Extension on Chrome
You don't need any extensions, you can just change the User Agent manually on Chrome's Developer tools, just click on the settings Icon and then refresh the page (as you can see this page's look changes):
This is what I use normally. It is not exactly what you are looking for I think but its worth the money!
Stick with webkit browsers for mobile testing, sans Windows Phone. Don't overlook the Android SDK's emulator and, if you're on a Mac, the iOS simulator, as you may come across rendering issues that don't exist in-browser.
I need your advice guys. I am developing a web browser application for mobile phones and it will be pure html5. I want that web browser application (not native application) to run on every mobile phone's web browser and my questions are
How I am going to adjust layout for different screen resolution? How can I achieve cross-platform compatibility make it look ok on every device. Do I need to do have a CSS file and have layouts for different resolutions.
If I need to have layouts, is there any cross platform mobile web browser application developing tool that gets html5 files and generates modified htlm5 files with layouts for different resolutions?
Thanks for your time...
To automatically adapt the screen resolution, you can use 3rd party framwork such as http://jquerymobile.com , http://jqtouch.com , and http://www.sencha.com/products/touch/ . But the widest cross browser compatibility is jQueryMobile, take a look at http://jquerymobile.com/gbs/
I don`t really know about the tools what you want. But so far I developed by using framework, so cross browser compatibilty will be less painful. I write the code by using 'commonly used IDE' such as Aptana, and Eclipse with JSDT.
I dont think you can access phone hardware feature by using pure javascript. For GPS, Ive never tried to use HTML5 geolocation API on mobile web apps. But there is 3rd party bridging tools to make your HTML5 web apps to have access on hardware device and ported as native apps, it is http://phonegap.com .
Hope this help you, Correct me if I`m wrong :D
I am working on a beautiful book for the iPad together with an artist/designer, and we would like it to look perfect.
I am using HTML to lay out the pages, and i noticed that they look slightly different in a browser, in a simulator and on the actual iPad (the paragraphs are broken into lines a bit differently, most probably because the glyphs in the fonts are rendered a bit differently).
Can i be sure that my book will look the same on all iPads? (That is if I use HTML, and not, say, PDF). Should I supply fonts together with the app, or can I rely on the system fonts? Is it better to specify the font size in pt or cm?
UPD: I am using UIWebViews.
Thanks in advance,
Timofey.
You can never quite be 100% sure that a HTML page will look the same across all browsers on all platforms, although cross browser compatibility is generally improving with each browser version - those of us who have been doing this since the days of IE6 will remember those days with a shudder!
What helps with the iPad however is that its the same device, same screen resolution and running the same software (iOS and Safari), so if you test it on an iPad in that configuration, it will look the same on all others.
However a word of caution - you can get the Firefox browser for iPad, and all software - including iOS and Safari is subject to change and upgrades, and subject to the fact that people can also be running out of date versions if they don't plug in and sync very often.
Of course, any upgrades are not guaranteed to change the HTML rendering engine, i'm just saying its possible.
The best thing to do is ensure you keep most of your styling in CSS, so that if say, iOS 5, or iPad 3 did something unexpected down the line - you can make simple edits across the whole site/book without having to edit every page of it.
There is a CSS 3.0 feature, which allows you to specify a font for your web page elements, that is to make sure it looks the same on all browsers/operating systems, even if they don't have the same fonts installed:
http://www.w3.org/TR/css3-fonts/#font-resources
http://www.css3.info/preview/web-fonts-with-font-face/
Concerning other elements - it is CSS hacks again, you have to see what the differences are, and try deal with each problem individually, depending on the browser. iPad's are using a mobile version of Safari by default, but Opera also have a mobile browser for iOS devices.
I'm developing the CSS file for the mobile version of the website my group are working on for our web design coursework, and I was wondering if it was possible to design a site for touch based browsers using the currently ratified specification of HTML and CSS, as the other member are doing for the desktop variant, or am I going to have to use the draft specification of the new language. I'm not intending to use anything too elaborate, I'm only attempting to allow the user to navigate the site with their finger, and the current implementation allows me to activate a dropdown menu on the desktop, but when I try to navigate on my Android handset, nothing happens.
The menu button gets illuminated in the way that all links in my browser do when they get pressed, but nothing happens. The research I've done since this revelation has led me to the conclusion that I'm going to have to experiment with the new spec, though since this is coursework, I'd rather stick with current standards than experimental drafts of new ones.
P.S. I'm only developing an informative site, not an application.
Yes, you can use older versions of HTML. iPhone, Palm OS, Android, and recent versions of the Blackberry OS all use Webkit, which is the same rendering engine that Chrome and Safari use.
In fact, the very first page on the World Wide Web will work just fine.
We'd need to see your code for your navigation bar to troubleshoot, but it's probably something along the lines of using a hover event to display the navigation (touchscreens can't have a hover event).
I can browse to any site on my iphone using the touchscreen. The language is not the problem. Most mobile browsers on smartphones can handle html(4)/css(2) fine. You should be more worried how to show the content so it will be easy to navigate on the site using a (small) touchscreen. Usability testing is your friend here. Browsing a website made for desktop can be very frustrating (not impossible) on a small touch screen.
Also the size of images and stuff shouldn't be to big. Since loading those can be a pain. At least the t-mobile(Netherlands) g3 network is slow, if available at all.
Note that the 'currently ratified' version of CSS is CSS1 (from 1996), CSS2.1 isn't yet a W3C Recommendation. So from that point of view the standards your other members are using for the desktop variants are not much more ratified than HTML5 and CSS3.
For sure do it! just ensure links are larger for fingers. Also allow the site to resize.
Most mobile sites are HTML1.0.
You would be silly using html5 + css3 unless you knew that it was only going to be used on an iphone eg. webapps.
And don't forget you can still use JavaScript!
Go For It!