anyone knows if I can switch back to mobile version after requesting the desktop version in Chrome for iPhone. Basically in Android, you can toggle between mobile and desktop version. In my iPhone 4s, when I ticked the desktop version, I couldn't go back to mobile unless I open a new browser again. Any thoughts? I maybe looking at a feature that does not exist? Thanks!
I have found that I can hit the Back arrow and that will take me back to the mobile version, otherwise right now, you can open a new tab, or look on the site for a link to the mobile version, which some sites offer. I agree, the toggle option should be a feature.
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'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.
I've got a little problem with my website and ipad/iphones. A certain tag in my css causes problems and I'm unable to check if I've solved the problem. Is there a way to look at my website as if on an ipad while not actually buying an ipad. Is there something like an ipad emulator or something?
You can use web (free) services that provide such functionality. There is a lot of them. For example: http://ipadpeek.com/ or http://mobiletest.me/.
There is also a simple solution that doesn't require any further app installation.
If you're running google Chrome you can enter the developer tools by hitting F12 on a PC and Command+option+I on a Mac.
In the developer tools you have on the top left corner of the screen a mobile device emulator, which you can choose various different models of mobile devices from. not just iPad and iPhone.
Note that you have to refresh the page each time you change a device emulator. Otherwise it won't load with all the characteristics of the current emulation.
I have made a website that's work fine on my computer (through all modern browser). Someone reported it's not worked from Safari mobile.
I have tried to see from Safari on windows that's make me look same as I want.
I have seen their screenshot and feel something wrong with my UI. Can someone have idea how I can check the look from my computer (windows).
How I can test my website for safari mobile from my computer.
You can actually download and install Safari in your computer and then check your website with all the available versions of safari for mobile. Choose Preferences->Advanced->Show developer menu in menu bar.
Finally, right click inside your website and then User Agent-> and then choose the safari version you want. Check this link for further information
Click "develop" on the top menu, then click on "user agent" and select your device... and navigate to your website.
check this out: http://webtide.wordpress.com/2009/09/14/how-to-test-websites-for-mobile-devices/
What you will need:
Safari Testing for iPhone/iPod Touch:
Open Safari and go to Preferences (Edit->Preferences).
Under the Advanced tab, ensure that “Show Develop menu in menu bar” is checked.
In the menu, click on Develop->User Agent->Mobile Safari 3.0 Browse to
your website and start testing!
Chrome Developer Tools has device emulation.