How to restrict browser view to Landscape on a mobile browser in HTML5? On potrait view, it should display "Switch to landscape mode" and load when it is turned to landscape mode.
you can use the "onorientationchange" event of your browser. I extracted a working example from one of my testing projects: http://jsfiddle.net/r9b8D/
Its not exactly what you are looking for, but it shows the implementation of "onorientationchange". Copy the jsfiddle example to your host and navigate to the site with your mobile phone to see what happens - Maybe you can navigate to jsfiddle with your phone, i am not sure.
Feel free to modify the example to fit your needs.
Related
Link to app
I've written the media queries to make the app responsive and they looked fine when I'm viewing them via Chrome DevTools. First screenshot is from Chrome DevTools, second is from my iPhone X:
Iphone X has a screen size of 325x812, which is the first difference.
Secondly, G Chrome Dev is an emulator, which means it only simulates what a page will look like on a specific device. It does not account for hardware and software (say which browser you're using). They use different rendering engines, so deviations are bound to occur.
I checked the URL, you are using react to make your page responsive which takes care of your application to be visualize properly on all the screen size.
You have design correctly only, you don't want your users to open desktop view in mobile.
I have been trying to make a responsive website for mobile devices . I have found two ways to test responsive design:
By resizing the window
Using Google Chrome developer's tools
In both of them I get a different view. Which one gives me the right view, as I use font-size and padding in 'em'.
Resizing browser window is not Responsive. While developing Responsive applications the easiest, but yet not perfect, way is using Chrome's Developer tools. Even that may give you different results, because mobile device screens are using not just width/height but also dpi. So 320 iphone6s screen is not going to be perfect match for 320px resized browser or equivalent android device.
Go for chrome developer tools. It's a great way of checking responsiveness. It comes with dimensions of popular mobile and tablet devices. So you can check for a variety of device at once.
Simply resizing the browser is not a right way of checking responsiveness.
Recently I built a page that works fine with both the ways you mentioned. You can check it here.
Let me know if you need any help.
I would say Chrome Dev Tools is the best bet for a local snapshot.
However, if you have access to one or more mobile devices you may want to launch the site on Heroku or another production environment and view it from the actual device.
An iPhone 6 for example, I find Chrome does not take into account the address bar or bottom nav in safari so things can be slightly off from the Chrome Dev view of iPhone 6.
I need to test an html file for mobile responsiveness, but all the resources I have found to do this need a URL or a localhost, is there any way to test responsiveness with just an html file?
Yes, simply open the .html file with Chrome or Firefox. These browsers have device mode.
You can change the screen size and see how it looks on mobile or tablet sized screens.
If you save your file .html you can open with firefox or chrome, but i suggest you to use firefox developer edition https://www.mozilla.org/it/firefox/developer/
If you use Firefox you can put in the menu -> development -> flexible display (ctrl+shift+m)
In Chrome (ctrl+maiusc+i + emulation)
In this page you can select the device to view.
You have a lot of options to test it, but each option has it's benefits.
You can minimize the browser!
You can use device mode from chrome,mozilla etc
You can find a lot of online responsive site testers for any resolution you want
In my opinion, the best way to test responsiveness is in Chrome. Right click on the page and inspect. Then there will be a button to turn on responsive testing. You can choose the device to see how your page will render on all kinds of devices. This is better than resizing your window because there are slight differences in how pages render on different tablets and phones.
There is nothing like using a real phone. As an example, px sizes differ between various phones and can cause troubles. The height of the URL bar comes into play in vertical flex scrolling when the display occupies 100%.
To do this kind of testing, you can use tunneling - products like https://serveo.net/ or ngrok.
I use http://www.responsinator.com
Very easy and complete, several types of mobile and table devices.
I have a project to do and I am desperate for a site that would show me how a mobile website would look with the code I have. The problem is i don't have a website url that I can use it on that will show the images provided with it.
Thanks,
Adam
You can use emulation feature of Google Chrome. Open your web page and hit Ctrl+Shift+J to open dev tools. There, click on a "drawer" icon (third from the right) - it will open the drawer panel. There, use "Emulation" tab - it will allow you to select from different various devices. Chrome will emulate screen resolution, input, and User Agent string.
Take the page on your desktop and resize the window to resemble the size of a mobile device. Pretty much you are making the window the same pixel size of a mobile phone's browser.
As far as the pictures go, you would need a url. You may be able to use this
http://jsfiddle.net/
In firefox you can use the responsive design layout using the command " ctrl+shif+m " .
This comes configured with default ranges for devices.
You can also install "web developer tool" in firefox and chrome . It has a "resize" tool that will show your page in mobile and tablet views also .
I'm coding a fully responsive cross-browser site. I've already coded portrait mode and what I did to inspect changes and modify the my CSS file was to scale my Chrome Browser up to a point where I saw the same thing on my browser and on my iOS simulator. In that way I could work out every change and edit my CSS file. I now need to do the same on landscape mode, but I can't find a way to use an inspector that would simulate landscape mode.
I have Chrome, Firefox, Safari and IE and I'm open to any tool that would enable me to inspect the webpage simulating landscape mode not only regular tablets and phones but also Retina-supported devices.
Here is a really cool plugin.
http://lab.maltewassermann.com/viewport-resizer/
You can use it on any browser. Drag the "Click or Bookmark" button to your bookmark bar, then click it on any page you want to change the view size for.
Here is the image of the button you want to drag to your bookmark bar:
Here is an image of the toolbar that it adds.
My favorite tool to use for this is http://www.browserstack.com/. This isn't free but well worth it.
A third option is Adobe Edge Inspect. You can display the page right on the device but inspect the elements through you laptop or desktop computer. This option is free but you need to create an Adobe ID.