When i access amazon.fr via my mobile it presents a different layout than the one is displayed if I access to amazon.fr via my desktop computer event if i reduce the width of the browser to the size of the mobile.
How does it works?
Actually the url is the same for desktop and mobile sites.
https://www.amazon.fr/
Both are absolutely same. But You can not find out the difference by adjusting the browser width.
The changes are made using window.ready function (or when window is ready). The styles are applied according to the window size that calculated when loading the page. This is to avoid excess use of media querying.
You can find out this difference from your desktop only by reloading the page or clicking on links in full width and adjusted mobile screen width
Have a look at here as well
Related
On our site, we are using the Bootstrap v3 grid system to control the layout of the page. When a user resizes their browser window, the bootstrap system kicks into gear and all works well.
We have a new use case, where a user needs to design a page for a given browser width, but we want them to do it without having to resize their own browser.
We have an outer that wraps the content and is set to a fixed with, and we want Bootstrap to check the width of that content and apply the responsive layout based on that 's width, no the browser window width.
Is this possible? And if so, can someone point me to an example or documentation of how to achieve this?
I recently had a similar case and used ResizeObserver to observe the width of an element to base CSS from rather than the viewport. Learn more:
https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
https://www.w3.org/TR/resize-observer/
Note: this is currently only supported in Chrome
Follow up: CSS container queries have been released as of April 2021, but there is no browser support for them yet – https://caniuse.com/css-container-queries
I'm building a Chrome extension that takes a screenshot of the user's active tab. I want to take both desktop and mobile screenshots.
For Desktop screenshot, I use the the chrome.tabCapture API functions and capture the content of the currently active tab.
How can I take a screenshot for mobile or custom dimensions?
You can use chrome.windows.update to force a resize. The received updateInfo object should have the width and height you wish to use. (there is no standard 'mobile' size).
You'd probably want to also -
Store the pre-resize dimensions and restore to it later. You can do it with chrome.windows.getCurrent, and inspect the returned Window for width and height.
Take care to account for toolbars and window margins, to get as
close as you can to emulating true mobile experience.
RE-EDIT:
I am in the process of making a 1 page site. This is for a school and will only be accessed internally (like a page for different links that staff can quickly use to navigate to).
However sometimes staff have different sized windows open, when they open IE (it will auto re-direct them to my HTML page) is it possible to make sure they open it as 100% width and height?
Thanks,
Nick
Ya you can have width and height to take up 100% space but it is not easy to design a page like that for all resolutions. As you have to exapnd and shrink content both in height and width it becomes complex.better have a fixed width and have height according to the resolution(Again a problem with retina display). Here are some browser statistics- Link.
you are concerned about your page on different resolutions of desktops and laptops. But the bigger problem would be mobiles and tablets as they do count for quite a lot of web-traffic.
Better way of handling the problem is to go with responsive design and target 2560×1600 and above 1366x768 for desktops and few mobile and tablet resolutions.
Here is a link for responsive design resourses- resourses
Liquid design isn't too difficult.
If you mean you want your page to open in a new tab or in the same already maximised tab, search for that; SO has that covered already.
Don't worry about height. Just make it fill the width and let the user scroll.
I am designing website for mobile access and I want to set page width, height and button sizes, so they display filling up the screen. For example if user is using HTC HD , the whole screen would be 480x800 with button sized 240x200.
However IE mobile as well as Opera load the page with some zoom level, so the buttons display either too large or too small. How can I either read current zoom level in javascript or set it from javascript?
Take a look into <meta name="viewport">. It's supported across a wide variety of mobile platforms, including (AFAIK) iPhone, Android, Blackberry, Opera Mobile and even IE6 Mobile. Basically, it lets you preset the device width, zoom level, and max/min zoom. Have a look at the Apple developer site and for more info.
Also, you can use CSS media queries to detect the shape and size of the browser, and serve up different layouts (etc) accordingly. Again, these are fairly widely supported and the Apple developer site has more information.
You shouldn't rely on using JavaScript on mobile devices because it is still not widely supported across all phones. Instead you should set the width of the page to be the same as the browser width so your pages appear at 100%, e.g. body {width: 100%; margin: 0; padding: 0;}
As for buttons you should use relative values or use different image sizes if you are able to detect the browser width before the page is loaded.
I am looking to create a fullsize window using javascript but I am having difficulties trying to take the actual size of the window into account. I can get the resolution of the desktop but if I set the windows width and height to that value, it is not 100% correct as it does not seem to be taking into account the size of the border for the browser application itself. How can I calculate my target width and height to take the browsers application border into account?
So basically you want to mimic the effect of hitting F11? Check out [old dead link]
I want to warn you that it's a usability nightmare. Try to think of a better way to execute your design without going full screen. Messing with the user's system settings is a HUGE no-no, and changing browser dimensions/resizing windows definitely falls under that category.
To find out the windows height and width you can use the following:
window.innerHeight/Width -> All browsers but not IE
document.body.clientHeight/Width -> All browsers
document.documentElement.clientHeight/Width -> All browsers
More info here: http://www.howtocreate.co.uk/tutorials/javascript/browserwindow