Ok, so I know how to write code for multiple screen sizes. But, I have no idea how to view my code on a mobile device before making my site go live. Please help!
You can play around with emulators which can simulate a variety of cellular devices. These can be downloaded using a program called Bluestacks for example.
If you have Google Chrome you can open a website and press F12 (on windows) to enter Developer Mode.
On the top left you can see a little smartphone icon.
Click it and choose a device. Then refresh the page.
Chrome will emulate the experience of a smartphone user straight from your computer, sou you can test it from there.
This is a view of this question on the emulator:
Here is the solution if you are using safari.
Enable the "develop" menu bar using Safari > Preferences > Advanced. Your menu bar should look like this:
Go to your website
Go to Develop > User Agent and choose the device/browser you wish to emulate.
You have two options.
Use of Emulators.
What you need - is any modern browser. Nearly every modern browser will offer you roughly similar emulator capabilities where you can select a target device/resolution. #intboolstring & #Pither has already mentioned safari & chrome options for you. IE & Edge have similar features (which you can probably explore yourself or see this link IE Emulator feature).
Using actual devices.
What you need - 1) wireless router 2) your dev machine/laptop which has a web server (like IIS on windows) & 3) some mobile devices (I would assume you would have atleast one smartphone which has a mobile browser on it).
You will need to connect your dev machine/laotop & your device(s) to the wireless and setup firewall on your dev machine to allow access to your website on your local wireless network. Check out this answer.
Once this is done, you should be able to load your site on any device connected on your wireless by tying http://your.dev.machine.ipv4:port-if-applicable/landingpage.html in the mobile browser.
(to find your machine's ipv4 address, goto command prompt and type ipconfig and press enter - I am assuming you are using windows)
You may be limiting your testing to a much smaller set of devices (ones you have access to). But this will give you a real-world idea (if not a much better one) of how you site renders & behaves on devices.
Related
I am wondering if there is a way to check website responsiveness without uploading my code to a host site. I have all of my files and code in VSCODE and I have tested it out through shrinking the browser etc but I actually want to see my site on different devices before I upload my code. Because everything is local to my device I can't think of an easy way to do this without actually uploading everything? Any ideas?
Note: I assume that you already have the Live Server extension installed in your vscode IDE and you are able to open your website on the web browser on the same computer
There's an extension for vs code called MobileView
You can check your local websites as well as global ones just copy and paste there the website link. But it is limited just to three mobile devices (iphone X, 8 and google pixel). You can open all three previews at the same time in different tabs.
But it additionally allows you to check how your site's design will fit to the phones real exterior (its color and shapes).
And of course you can open your website on the real mobile phone if your vscode computer and the mobile phone are on the same wifi network.
Does anyone know how to capture screenshot on Nokia 8110 4G (KaiOS)?
You may follow these steps to get screenshot via Firefox WebIDE.
On the device - dial *#*#33284#*#* to enable developer mode. There will be a bug icon on the status bar.
Download Firefox 58.
[Important] Disable your internet access, this is to prevent Firefox got updated to a newer version which might break the WebIDE functionality.
Launch Firefox 58 and disable auto update.
Resume your internet access.
Launch WebIDE in Tools > Web Developer > WebIDE.
Restart the WebIDE (because the ADB helper would be downloaded automatically, and need to restart it to take effect.)
Now you should be able to see Nokia 8110 detected under "USB devices" at the right panel. (if not, see below)
Click the device, "Nokia 8110", and then click Screenshot.
See here for a sample screenshot.
Troubleshooting if you failed to see Nokia 8110 detected:
I found it might fail if your Firefox got updated to a newer version automatically, in this case you might need to leverage creating new profile to start over again, see here for details.
If the Firefox version stays correctly at 58 but after you click the device, it shows an error saying "Failed to connect", try to reboot the phone and also restart the WebIDE as this post suggested.
EDIT: Yes it is - Joelbert W's answer worked and makes the other responses a bit silly by comparison, just * and # together :-)
Unfortunately, it is currently not possible :-(
https://twitter.com/KaiHelps/status/1072446931421593603
https://twitter.com/KaiHelps/with_replies
It is possible either with WebIDE connection or with a custom ROM such as GerdaOS where you can make screenshots by pressing Power with half-open slide lid.
However, I'd only recommend installing custom ROMs for experienced users only since you can't use any official updates after installing them.
So I have a go flip 3, and i stumbled on if u press * and # almost simultaneously, it takes a screenshot.
I believe it's possible on certain devices and OS versions using the Screen Capture API as well.
Im trying to test my website on different kind of devices, for example iphone, tablets or androids. The problem is i do not have access to all of those devices and every so called online emulator doesnt really emulate anything else besides resolution.
So say iphone related issue doesnt appear on my computer.
My question would be whats the best paid or free service that would provide me the tools needed to test my website on as many different devices as possible?
Just to name a few so far i tried:
http://mobiletest.me/
http://www.mobilephoneemulator.com/
http://www.brickandmobile.com/mobile-emulator/
None of them displayed same issues that im having on the actuall device.
For Android, you can install the SDK, which includes a device emulator that runs Android in (basically) a virtual machine. This virtualized copy of Android includes the browser, so you can use it for testing your site. You can create virtual Android devices with a variety of screen sizes, so you can test your design on both phones and tablets.
Note that if you want decent performance from the emulator, you should configure it to run an x86 system image (as opposed to ARM), and install the HAXM add-on (available through the SDK manager app) that enables the emulator to use your processor's virtualization support. This allows the emulator to run the Android system directly on your real processor, instead of having to emulate a processor. You should also enable the "use host GPU" option so that graphics in the emulated Android device can be hardware-accelerated instead of rendered in software.
I have a codenameone app that works fine in the desktop emulator (windows 7) but when I run it on my Xperia Z1 (android) it crashes when I try to show a new form (this has been working fine).
I am currently using the free account and so do not get crash reports (e.g. a call stack). And it'll take me forever to keep trial-and-error hoping to find it ....
Any suggestions?
Install the Android SDK, connect your device with a cable and launch the DDMS tool to connect to the device. You should be able to see the log messages and stack trace thru that and it might give you a better indication of what is going on.
I'm writing an application that will be run on a windows 7 system with a monitor and a front panel as a dual screen setup. Virtual desktop software will be used to access it most of the time, and the virtualization software should ONLY show what is on the monitor, not the front panel.
When set for "Extend these displays", the virtualization software shows both screens spliced together, and there does not appear to be a way to turn it off. If I set the Multiple Displays setting to be "Show Desktop Only On 1", the virtualization system works correctly, but now in my WPF application it's as if the second monitor does not exist. My Screen.AllScreens array only shows one monitor.
Is there a way I can get my WPF application to show on the second monitor in full screen mode when the desktop is set for "Show Desktop Only On 1"? For purposes of this application, it will ONLY ever be full screen.
You are approaching the problem from the wrong angle. You need to look at the virtual desktop software and not your app or Windows itself.
First off, for Windows to use dual screens, which you want, you must set "Extend these displays". Without this, it is impossible for Windows or any other software to use the second display.
Secondly, under "virtual desktop software" I assume something like Remote Desktop, TeamViewer or VNC. All of those programs should allow you to select whether to show all displays. For instance in Remote Desktop, before connecting you can select Options -> Display -> uncheck "Use all of my monitors for remote sessions".
If on the other hand you are looking for a way to limit the end user, that he/she couldn't in no way access or see the other monitor, then you must find a virtual desktop software that can only show the main display (this might be very hard, because most software can handle multi-display setups). The other solution is to extend your own software to stream it's main screen output to another machine and accept input from it - think of writing your own virtual desktop software.