Develop Reference

How to change webpage zoom based on screen size?

Hi so I created a web page that looks fine on my desktop monitors. When I viewed the page using a laptop, the page looks abnormal. However, when I zoom the page to 67% it appears fine. Both my monitors and my laptop has the same resolution, 1920 x 1080, but my monitor is bigger than my laptop's one. I know that i can change zoom in CSS but it would look bad on my pc. I was wondering is there a way to change zoom based on screen size in javascript or CSS.

One option could be using media queries in your CSS to change the styles that get applied depending on the size of your screen. You could have one set of styles that works for larger screens like your PC, and another that applies for smaller screens like your laptop.

This can be done with JavaScript if you include the viewport meta tag in your HTML.
if (document.body.clientWidth < /*screen width pixels*/) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, initial-scale=0.67, user-scalable=0');
}
You can substitute the properties below with different values to test out what works for you.
initial-scale property controls the initial zoom level (possible range between 10%-1000% or 0.1-10.0).
user-scalable=0 prevents users from zooming

is amazon dot fr in responsive or are ther two sites?

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

JS Position fixed & Android / iOS differences

Recently i am working on a mobile webapp with a big textarea that needs to constantly display two little buttons on the bottom corners of the viewport. So i started with the basics:
position: fixed;
bottom: 10px;
This works smoothly and looks beautiful on my target devices (iOS >=5, Android >= 2.3). However, the problem starts when i give my big textarea a focus() and a system keyboard appears.
In iOS browsers, the keyboard is just an overlay on the viewport - so the viewport keeps it's dimensions after keyboard is on and half of it is just hidden under it.
In most android devices the keyboard appearance makes the viewport's height smaller and fitted to the remaining area so my position fixed workes here. However, some android devices work just like iOS and the keyboard appears as an overlay.
I'm trying to think of the best way to cover this, not using user agent string. I want this to be a universal solution. I figured out sth like
//check the viewport height
on(focus) -> see if viewport size changed and change position: fixed
But to do this i still need to wait couple seconds after focus to let the window get resized or not + i don't really know where to put my buttons if the viewport stays the same, as i might be on any of the iOS systems (the have different sizes fo keyboard) or on android device with bad behaviour.
What do You think?

Responsive CSS with high-res smart phones and tablets

I am having a issue when I try to make a web app responsive to screen-size.
I have css that I want to use for smartphones (iPhone, Andriod, blackberry, windows phone), and also have CSS I want to use for tablets.
My test devices are an iPad 3 (768 x 1024) and blackberry 10 (768 x 1280). and the widths being the same is an issue because my css starts with:
#media screen and (max-width:768px){
//enter code here`code here
}
Because the blackberry has slightly better resolution, it renders the CSS I don't want to use for it. Is there another way I'm suppose to check the media type? I was wondering if there is a way to check the width with a measurable distance (cm or in). not sure how to solve this.
thanks in advance

The “pixels” that are used in CSS declarations and when the browser reports the screen size of the client device have nothing to do with the actual real-world pixels on a device's screen. The “pixels” that are used in CSS are essentially an abstract construct created specifically for us web developers. To concern your self with the actual amount of real-world pixels on a high-resolution mobile screen is, for most web applications, completely unnecessary and will only lead you to utter madness.
You can determine the browser and device type by inspecting the navigator.userAgent property in JavaScript. For example, to test for (practically) any mobile device:
// if mobile === true, 99% chance the device is mobile.
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
You can of course inspect navigator.userAgent to determine if the user is on a specific type of device or browser that you are particularly concerned about or having a problem with.
But again, in my personal experience, clever, simple, and flexible responsive CSS design (supported by media queries and JavaScript, too, of course) will render beautifully on 99% of device/browser combinations without having to resort to inspecting navigator.userAgent to create different styles for individual devices.

You can also restrict your styles to the height:
#media screen and (max-width:768px) and (max-height:1024px){
// iPAD
}

You should add the meta tag viewport in your html header :
<meta name="viewport" content="width=device-width, initial-scale=1">
To sum up :
width = device width x pixel density
(Galaxy S4 : 1080 = 360 x 3)
This metatag allow you to catch the device width instead of the "faked width" (360 instead of 1080)
Some good reading :
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
http://screensiz.es/phone
http://www.html5rocks.com/en/mobile/mobifying/#toc-meta

Cannot scroll web page on iPad

On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.

Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.