What is a good way to test a Webforms website with a mobile master page from code? Electric Mobile Studio works but it is not free.
I use Chrome DevTools (Ctrl+Shift+I).
From DevTools you can toggle device tool bar (Ctrl+Shift+M).
Once open you can view as different:
devices
resolutions
network speeds
and change from portrait to landscape.
This is the best solution I have been able to find in the past year+
Chrome has an extension called "User-Agent Switcher for Chrome." It can be used to switch to iPad and other views that will invoke the mobile master page.
The main strength of this solution (for me) is that it can be used from code in debug mode.
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg
Related
when i'm trying to login to Cloud 9 IDE on smartphone I get only "Dashboard loading" message. Why? What difference is between mobile and desktop browsers in this case? Mobile devices are fast anougth today and have gigabites of RAM and big High-res screens. Same browser engines.
Mobile devices typically require touch support and responsive layout, which can be more difficult when it comes to an IDE. Keyboard support can be another challenge.
We work on a web application (HTML5 / JS) where performance is critical (physics simulation).
There are a few great options to trace performance on desktops: Chrome Dev Tools timelines, chrome://tracing or the promising Web Tracing Framework. The last option seems like the most powerful one. It also supports remote control of Chrome for Android, but unfortunately Mobile Safari is unsupported.
Do you know any other tool that can be used to precisely measure performance on Mobile Safari?
I know I can debug pages on Mobile Safari with Mac Safari and perhaps access timeline and/or profile tools too. Is this the only option? Do you know other interesting ways of performance tracing a webapp on Mobile Safari?
Have a look into Weinre a fantastic remote debugging tool based on webkit's developer tools:
http://people.apache.org/~pmuellr/weinre/docs/latest/
The timeline tool is still in the early stages but you can create your own timeline events.
For webapp's performance,with enough experience you can tell from the page's debug borders(Compositing Render Layers) and repaint counters,they are not powerful like Web Tracing Framework does,but in many case they help a lot.Web Tracing Framework already works on android chrome,for mobile safari,mac safari's develop tool also can enable to inspect mobile safari's debug borders and repaint counters,also if you dont got a mac,you can just try MIHTool which you can enable debug borders and repaint counters in the app on you iOS device.
Check out Mobile Web Thursday: Dev Tools to learn more about it.
Joomla automagically recognises the mobile template and displays it on the mobile devices. but sometimes it does not display(very rarely) and also sometimes the behaviour is different(like logo disappearing).
Question:
1) Is there a way we can test the mobile template on the desktop computers (like m.mobilesite.com) so that we can debug the issue?
Yes You can,
The http://www.browserstack.com sites Provide a real machine for testing the device and browser compactability.(It a remote machine so the result is 100%).This required signup.
Also you can check iphone and ipad compactabilty with safari Developer option.
From Settings->Preference ->Advanced ->check the Show Develop menu option.
Now you will get a new menu in the browser Developer there you can choose the user agent.
You can also find several sites that provide mobile testing but those are not 100% sure
like iphone4simulator.com, iphonetester.com
Hope this may help you..
I also found that - If you decrease your browser width and height - it will display mobile format. I am not sure if this is a feature of later versions of joomla. Also on Chrome - developer tools, there is an option to choose the mobile device to test the webpage.
Are there any add-ons to test an HTML page to see what it will look like on a mobile device? I'm developing with PhoneGap but Eclipse emulator is too slow to refresh it all the time so I want to have a browser extension that make screen resolution like on mobile.
If you care only about the screen size, Firefox 15 (currently Beta, release coming up in two weeks) has Responsive Design View in the Web Developer menu that allows you to adjust "screen size". For example, you can select 360x640 (nHD resolution) and have a look at your page.
However, mobile browsers do custom adjustments to web pages and these adjustments depend on the browser used. For example, Firefox Mobile does something called Font Inflation. You cannot reproduce it in a desktop browser, you have to actually run Firefox Mobile for that. The problem: mobile browsers will only run on mobiles, even Mozilla stopped supplying Firefox Mobile for the desktop after they switched to the native Android UI.
Edit: Starting with Firefox 33, there is a Firefox OS simulator built into Firefox (thanks to Tomek for pointing me into this direction). To start it, open WebIDE, then click "Select Runtime" and choose "Firefox OS 1.3." This will start the simulator, all you need to do then is clicking the Firefox icon (for me it's a blue one, not the usual orange). There you are, you can test any website in a real mobile browser, right on your desktop.
Firefox OS simulator can do the trick: Just install it. Run it - and run the browser inside. :)
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.