I've built a small basic portfolio page based on a bootstrap template. The top features a blue header with an animated gif I built on top of that with a parallax effect. The animation displays and runs properly on everything EXCEPT for iPhones. Even the Chrome simulator mode for iPhones displays properly. Non iPhones also display it correctly.
I'm definitely a newbie when it comes to front end, and can't figure out how to debug this, since it shows up fine on the Chrome simulator tool where I normally do my debugging.
Any help would be much appreciated.
View my site here--
The Chrome device emulator will help you do most of the work, but it's not an iOS simulator. You can use the iOS simulator in XCode paired with OS X Safari's developer tools (inspect iOS Simulator) if you really want to debug for iOS.
Related
I'm developing a responsive web app with a complicated UI. In order to demonstrate changes that I made, I'm checking out on responsive design modes both in Safari and Chrome. Is there any way that I can simulate keyboard appearing when I clicked on an input element as it occurs in a mobile Safari/Chrome.
For example, I pick iPhone X in responsive design mode in Chrome and Safari. Since the keyboard doesn't pops up when I click on an input, the scrolling behaviour is different than the experience on an iPhone device. In order to see the results of my change I need to deploy it to a server each time.
Is there a way to pop up the keyboard in responsive design mode?
After trying a bunch of solutions, I finally ended up with using Xcode iPhone simulators. I do the debugging with binding simulator and Safari developer console on my Macbook. If you select IO/Keyboard/Toggle Software Keyboard, then you would be able to see how your design might look on an iPhone when keyboard is visible.
I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?
So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.
Update: 🙁 Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.
Original answer
You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:
However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.
To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.
See: Test Responsive and Device-specific Viewports
I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.
I'm developing a PhoneGap application. In iOS 5.1.1 there was no problem but in 6.1.3 there is a scrolling issue.
If I use a container with overflow:auto; -webkit-overflow-scrolling:touch; and the content is larger than 4000-5000 px, Safari crashes after scrolling.
You can test it with the link below. Click the map and scroll it after zooming in 4-5 times.
http://okngnr.com/arb/
I know the problem is not SVG or too many DOM elements. Is there a bug in iOS 6.x? How can I see the crash report of Safari? I'm using Windows and these isn't CrashReporter under \Users\<username>\AppData\Roaming\Apple Computer\Logs\
Thanks in advance.
Maybe an iOS issue. Did you test on iOS 7 (for having an idea) ? On Mac, using Xcode Phonegap project and the debugger, you might have more informations. Maybe the problem comes when you load in one time all the content.
If you paginate ? Four by four with a button in the bottom to load others. It's not cool for your interface but if it's an iOS issue, you may not have the choice...
I have started coding for mobile browsers (i.e. iPad, Galaxy Tab, etc). For a starter, I don't have budgets to get all the tablets for testing (I wish I do :D). Anyway, I am looking for a decent mobile browser simulators. I have looked into Ripple (only works in Chrome), MobiOne, and PhoneGap simulator. But all of these are not that up to par. Can someone recommended a decent one? and it will be great if it is also open source.
Thanks in advance
A good list of emulators and simulators are here: http://www.mobilexweb.com/emulators
For iPad, the only simulator I know of is built into XCode when you compile or run. You have an option of previewing in iPhone or iPad, and though the screen is hard to read, it's manageable if you click on 2x button.
If you're developing for android, the Android SDK has one.
http://developer.android.com/sdk/index.html
if you just want to quickly view how a webpage would render at various mobile device resolutions then here is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!