we have been developping a mobile application using HTML/CSS/Js. Because this was developped mostly in the Device Toolbar of chrome, it does not look good when not used in a mobile browser. Unfortunately, when I build the Project to an Android APK using Cordova it does not look like it would on a mobile browser (Firefox, Samsung Internet, etc.)
First Image was taken in firefox, the second in the Cordova Application.
Is there any way to make Cordova behave like a Mobile Browser would?
If it isn't possible to make Cordova behave like a Mobile Browser can you emulate this using css or javascript?
I have heard about and tried the zoom css tag, which in my case helped on a handful of pages, though a few other pages, which work perfectly on the Mobile Browser, didn't look good at all using zoom.
This answer assumes you've tried the <meta name="viewport" content="width=device-width, initial-scale=1"> meta tag as suggested in a comment.
Cordova uses the systems' webview. It does not have it's own webview implementation. Therefore Cordova is already using a "mobile browser" engine. But the mobile engine being used might not be of the same version as the installable browser version.
As long as you're using Android 4.4+, the system webview is a chrome-based webview and as of Android 5.0, the webview is upgradable by the use through Google Play updates. It's worth mentioning that the latest cordova versions only support Android 5.1+.
When you setup a new emulator, it will have the factory versions installed by default, which can sometimes be a really old version of the webview. If you installed a Google Play enabled emulator (the emulator image is marked as a Google Play image), you can sign into Google Play and update the device which will include the system webview updates. Older devices may still have the webview version limited. For example, I believe android 5 can only get up to System webview Chrome 70 if I recall correctly.
Using a google play enabled emulator and updating the emulator device via Google Play may fix your issue, but it also suggests that your HTML/CSS document isn't backwards compatible to older webviews versions. Perhaps your document is using CSS features that only exists in newer webview versions.
Related
I have a Windows Phone (a Nokia Lumia) from which I recently encountered an issue. I can't zoom (pinch zoom) or navigate (scrolling with the finger) using Google Maps. It was possible I believe last week or the week before that, but now it's not working anymore.
I can't recall any updates issued in between last working date and now, nor have I fiddled with any options.
I saw in a thread that one could use the options in the browser in order to enable zooming. But this option is not present for me. I use Internet Explorer.
Based from this thread, if it was determined that you are on a desktop version or IE, it will allow zooming to be controlled by mouse. Touch won't work at all. I also found this blog which states that:
The mobile Web version of Google Maps is optimized for WebKit browsers such as Chrome and Safari. However, since Internet Explorer is not a WebKit browser, Windows Phone devices are not able to access Google Maps for the mobile Web.
The desktop version of Google Maps works just fine in these browsers. It's one thing for Google to say the mobile site isn't tested or supported in the mobile browsers, but the desktop version, at least, shouldn't be off-limits. The desktop version may not be ideal in a mobile browser, but it does work.
I have a website that uses (except for other things) AngularJS. This website works perfectly fine on (example):
Google Chrome
IE
Firefox
iOS
Android
However I am having problems with Windows 10 mobile as one of the features is not working correctly (to be more precise it is $interval).
When testing my app on one of the browsers I view website via Web Inspector and go to background code to inspect where exactly the app fails. However I have no idea how to fix the problems that occur on mobile devices - such as Windows 10 Mobile?
How can one debug websites on a mobile device?
Windows 10 Mobile has Edge Browser. Try debugging it in that.
This is might be helpful.
https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/
for the debugging tool you can use
https://msdn.microsoft.com/library/dn255001(v=vs.85).aspx
So, I'm building responsive pages using the Chrome dev tools iOS emulator, only to find that there's a 5% difference when you check it out on an actual phone.
All my css is normalized and has the latest vendor prefixes, so I'm stuck with guessing what's going wrong with that last 5%.
Surely there is a way to see the CSS output on a mobile device? Dev-tools for mobile. Surely!
On Android phones, Chrome does support Remote Debugging over USB
Since you're in iOS, though, you are able to use Safari's remote debugging feature to try to debug the page. Chrome for iOS uses Apple's UIWebView to render pages, so debugging in iOS Safari should give you the same results you're seeing in iOS Chrome.
Safari's remote debugging feature can be used by going to Settings > Safari > Advanced on your device, connecting the device to the computer via USB, then in Safari on your Mac, go to Develop > [Device] > [website] to debug.
I'm making my portfolio website and I'm using pure HTML 5 no .js the about page doesn't work on iPhone and doesn't scroll everything together some of the elements positions are fixed and don't scroll. I don't own an iPhone but is there anyway to simulate the iOS on computer so I can debug the page? And is there such a tool like "inspect element" in chrome on the iOS safari? If not how can I debug and find how the browser is rendering wrong on the phone? Cause I validated my code and it's supposed to work, but its not!
You can simulate iOS using Xcode and Mac OS.
And for the debug purpose there is no inspect element in Simulator. Yes you can take a help of Accessibility Inspector
In the Simulator >> Go to Settings >> General >> Accessibility
Turn on Accessibility Inspector - This will help you to inspect different elements.
Something important to bear in mind is that because of Apple's policies, all browsers must use Safari’s layout engine to render pages, that means there are very few differences in rendering a page between Safari and other browsers on iOS.
There are two methods that you can use to debug a web page running on your iOS device on your using a browser on your Mac or Windows computer:
1. Debug using a Mac
If you have a Mac, you already have tools to live-inspect and debug web pages on your iOS device.
See here: https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html
2. Debug using Windows
Xcode and MacOS are not the only way to debug websites running in a browser on OSX. There's a few ways:
Telerik
WineRE
I personally use Edge Inspect when I'm forced to use Windows.
Adobe Edge Inspect
http://www.adobe.com/devnet/edge-inspect/articles/browser-testing-across-devices-with-adobe-edge-inspect.html
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.