I've built an mvc app that i've loaded up to azure and on a desktop it looks fine. But the layout is a bit all over the place on a mobile device. Rather than publishing my changes to azure every time I make a design change is there a way I can see how it would look in a browser eg. chrome on a mobile device? One way i'm doing it is just resizing my browser on the laptop to the size of a mobile device and that kind of works but just wondering if there was a better way.
Thanks,
Jerome
You can use F12 option which have toggle device toolbar option in chrome. That would help you see the responsive respective design of your app in all the popular mobile devices chrome gives as an options to test on. plus you can use custom sizing to adjust width and height of the screen to manually check the responsivity.
Related
This is my 1-st question at StackOverflow.
Description
I'm trying to test RStudio Connect 1.4.2-15-x86_64.rpm.
I write Rmarkdown document which is well compiled as on Windows (dev platform) as on CentOS (server platform). This document is much longer than web screen height.
While content of document well scrolled on Android mobile and all PC platforms and browsers, I have issue with vertical page scrolling at mobile iOS (iPhone & iPad). Content outside physical window is hidden.
I tried all popular browser on iOS like Safari, Opera, Yandex, Mozilla. The same situation happened in all browsers. It feels that error is at iOS web rendering engine level. Looks like issue 'IPad Scroll Issues with Fixed Content'.
Question: How I can workaround it at R\package\css\pandoc level?
P.S. I've created short video snapshot with Good scrolling at Desktop browser and Broken scrolling at iOS browser.
How can I specify the icon/ image thumbnail and text used in the iOS Chrome new tab? It doesn't appear to be http://example.com/favicon.ico.
Screenshot of iOS Chrome new tab
Quick and easy solution
Apparently you have only one icon, favicon.ico, which is mostly ignored by mobile browsers. You should at least define a Touch icon. You can use a service such as Real Favicon Generator to create everything and support all browsers.
Full disclosure: I'm the author of this site.
Precise (but probably too elaborate) solution
Run the compatibility test to understand which icon is actually displayed by Chrome in this particular place. For example, if you discover that Chrome takes the 152x152 Apple Touch icon, well, now you know what you need.
Problem: you probably want to support all scenarios (Android Chrome, iOS Safari, etc.), not only the "New tab" of iOS Chrome. So even if you find out, you will probably want to declare other icons.
Working on a site and got feedback from the client that when browsing the site on an iPad and iPad Mini the site will suddenly reload with the message "A problem occurred with this webpage so it was reloaded".
The site it's happening on is a fairly image heavy one, it's infinite scroll page with about 60 entries, retina enhanced imagery via <picture> element.
Never seen this before, what's causing it, and how can I get around it?
Perhaps it runs out ouf memory? But I thought iOS was smart enough to dump images out of view if it needs memory to load new stuff?
Apparently this did not happen on iPhones (I take it they tried with 5S and 6), but that's probably because the total screen resolution is much lesser and the images are smaller in file size..
The only way to find out is to plug an iPad/iPad Mini into a Mac running Safari and inspect the page runing on the device. So, first, turn on the "Develop" menu (in OS X Safari's Advanced Preferences), like this:
Then from the Develop menu you can select the device you want to inspect Mobile Safari on… like this:
That gives you effectively the same inspector that the desktop version of Safari uses and hopefully you'll find some clues as to what is going wrong. (I'm betting Javascript error).
Is there any way of testing Apple Smart App Banners in a desktop browser by doing something along the line of spoofing the user agent, or is this functionality so specific to Mobile Safari that I can only test it on an iDevice?
I know that merely spoofing the user agent in a desktop browser doesn't do anything in regards to showing the Smart App Banner, but maybe I can do something else in my desktop Safari browser to test the banner?
I am not an iOS developer but I have access to the iOS emulator on my colleague's Mac if that helps.
Unfortunately, the Smart App Banner is only displayed on iOS Safari on a real device. The iOS Simulator and desktop Safari cannot display smart app banners.
This is a bummer, especially because resetting smart app banners after they have been dismissed is a huge pain.
In chrome dev tools, click the sprocket that lead you to the more advnaced settings, there check the 'override' check-box, and select a mobile user agent(IOS, Android).
Keep in mind that the screen sizes that chrome provide are not always accurate and might need some adjustment.
For more accurate screen sizes you might want to use Mozilla & Firebug(basically has the same functionality)
You can just tap the toggle device toolbar inside chrome inspector and the smart app banners are recognized since this toggle changes to a mobile user agent.
See sample result :
When developing XAML apps I utilized XAML spy which allows me to inspect the rendered app elements when running the app in the simulator. It aids in finding where certain styling is emanating from. It's similar to developer consoles in web browsers and in particular Firebug in Firefox.
Is there an equivalent tool for iOS development that I can use while running my app in the iPhoneSimulator from Xamarin Studio?
I would give Reveal a go. It allows you to inspect and debug your UI and autolayout issues similar to XAML spy.
If you are using Xamarin there is a getting started guide
I haven't used it, but http://sparkinspector.com/ is the closest i've seen.
I have found something that can be used for some limited inspecting of elements - Accessibility Inspector.
Enabling the iOS Accessibility Inspector:
Start simulator > click Home button to return to home screen > start Settings app > nav to General, Accessibility and turn it on
It adds an overlay to the screen showing label, traits, frame and notification details.
It's not as extensive as I was after.