Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.
Related
This is a test page mentioned in Google web dev responsive design article for testing the viewport meta tag:
https://with-vp-meta.glitch.me/
There is a strange behavior observed when testing with chrome dev tools responsive devices in devices with very low width (at least below 320px)
If you keep on reducing the width, there comes a point where the html body width is not equal to the device pixel width anymore (though it should be equal as per the width=device-width value).
It looks like this:
As you can see, the body tag is selected in the Elements panel. The size of the selection is much less than the 81px device width as mentioned in the dev tools device header (81 x 711)
If you look at the dimensions in computed styles: the dimensions are mentioned as 81px width
This is a real issue, actually happening with my website (on not so smaller width), and this is just an example to recreate it easily.
I suspect this has something to do with the viewport meta tag and it's handling, but i am not able to pinpoint what the problem is. I have tried different combinations of width and initial-scale to recreate this scenario in other dimensions, but wasn't able to recreate a scenario where the rendered body width is less than the viewport width, but devtools inspect still shows the dimensions as correct, although the rendered dimensions do not match the pixel dimensions?
I know we can make horizontally responsive content in ionic 2. What i want to know is how to make pages height responsive for all type of screens for example if a screen cover whole area on iphone 5 then it should cover whole height wisie area in iphone 7 also ? whats the best approach to achieve this ?
As some have already mentioned, you can use vh for the height property on your css. The catch here is that the viewport may change even if the screen orientation stays the same. This happens when you place an input in your app and it gets focus. The keyboard of the mobile device pops up on the screen, and the height of the viewport changes because the keyboard took part of it. f your mobile screen is 430x710 (some random number here) 1vh would be 7.1px, but when you tap on an input and lets say the keyboard is 430x300, now 1vh will be 4.1px (( 710 - 300 )/100)
That could be a real problem with responsive design. My advice is to use vw, the only thing that might alter it is the screen orientation (you can lock it). The extra step is that you have to use conversion to get the right number in vw that you wanted previously in vh.
I hope I have understood your question correctly, you want to make the page height the same as the height of the device viewing it?
Well, let me introduce you to....
viewport height (or vh)
One vh is equal to 1% of the height of the viewport. So, as you can probably imagine, 100vh would be equal to 100% of the height of the viewport! The viewport is basically the view of the page. However beware, the vh unit is not support in Internet Explorer 8 or earlier.
I hope you will get good idea to make the responsive properly from the follow parameters.
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
Actually vh is a perfect solution to make the responsive based on viewporot. The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages.
On a number of good websites, I see that the page loads so that the content is the same width as the browser.
Specifically on iPad: If you rotate the screen after page load, and zoom out, the content seems to resize in width to match the screen width again.
What is the "trick" to achieve this? I don't want to use the "width:100%" technique, because I would still like the page to be able to "zoom in", where you then you have to pan/scroll to see the rest of the content.
Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.
If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:
.yourcontent {
width: 55px;
}
You would want to create your elements with percentage based layouts, or viewport based layouts.
You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness.
Using something like:
.yourcontent {
width: 50%;
}
will set to only use 50% of the screen width, no matter the browser sizing.
Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.
example:
.yourcontent {
width: 50vw;
}
Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/
You can still zoom in using a library like bootstrap.
I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on:
$(window).width();
However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes).
I use the following in the Head portion for mobile devices:
meta name="viewport" content="width=device-width, initial-scale=1"
BUT
For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with:
viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';
I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
I have just make a responsive design, but there are 2 mistakes. One that when window is resized to different size, entire website will automatically resize, but Heading title and slider doesn't resize. But if i reload it, it will resize.
I have made different css rules of font sizes and slider height, which don't work without reload. You can see online website at: http://www.itmediagroup.lt you see slider, change window size, then u will see a problem, when reload website, and see all changes, I think all bugs are on my css, but i dont know how to fix it.
P.S fontsize i was trying to do in percent, but then the size of font is too small.
You can either set font sizes for elements using media queries, javascript (fittext.js) or you can use css viewport units. For example;
Viewport unit syntax
1vw: 1% of viewport width
1vh: 1% of viewport height
1vmin: 1vw or 1vh, whatever is smallest
1vmax: 1vw or 1vh, whatever is largest
It is supported by most new browsers but can be made more "bulletproof" by using VminPolly
Some good info and examples here