I use angular material v. 1.1.0-RC.5.
I created simple toolbar
<md-toolbar> </md-toolbar>
When browser width is less than 960p, toolbar change it's height to 48p. It looks logical, although I want my toolbar to be the same height all the time.
But what is really confusing for me - when browser width is less than 500p - toolbar become bigger than just before (56p)!!
One thing I noticed: browser height should be greater than 274p to reproduce this behaviour.
Is it an issue?
And is it possible to disable toolbar resing?
Live example (make sure that content area height is greater than 274p)
You can specify the height in css to solve this issue.
md-toolbar{
min-height:64px;
max-height:64px
}
Just try to set height in multiple of 8 as material-design uses all size in multiple of 8.
Working Exmaple. http://codepen.io/next1/pen/pbwjKV
The behavior you experience happens because the orientation media query gets triggered.
This bit is from the angular-material.css:
#media (min-width: 0) and (max-width: 959px) and (orientation: portrait) {
md-toolbar {
min-height: 56px; }
.md-toolbar-tools {
height: 56px;
max-height: 56px; } }
#media (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
md-toolbar {
min-height: 48px; }
.md-toolbar-tools {
height: 48px;
max-height: 48px; } }
According to this documentation it gets triggered in such cases:
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.
Also it contains a note which is actually your particular case:
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
I have designed a page where four div tags are there in the page. If I test the page in mobile phone (5 inch) it fits the page perfectly, If I test the same page in tablet the page fits with in 30% of the screen. So how can I set the div size so that it will fit for all type of screens.
Fiddle link
HTML:
<div class="bubble0" align="center">
<h3>Three Levels </h3>
</div>
<div class="bubble" align="center"> </div><br/><br/>
<div class="bubble1" align="center"> </div><br/><br/>
<div class="bubble2" align="center"> </div><br/><br/>
<button>Play</button>
Any suggestions please,
This is called Responsive Web Development(RWD).
To make page responsive to all device we need to use some basic fundamental such as:-
1. Set the viewport meta tag in head:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>
2.Use media queries.
Example:-
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
3. Or we can directly use RWD framework:-
Bootstrap
Foundation 3 etc.
Some of good Article
Media Queries for Standard Devices - BY CHRIS COYIER
CSS Media Dimensions
4. Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)
Below media queries for generic Device type: - Larger Device, Medium Devices & Small Devices.
This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.
/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
#media screen and (min-width: 1024px){
/*Style*/
}
/*###Tablet(medium)###*/
#media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}
/*### Smartphones (portrait and landscape)(small)### */
#media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
You question is a bit unclear as to what you want, but judging from your comments, I assume you want each bubble to cover the screen, both vertically and horizontally. In that case, the vertical part is the tricky part.
As many others have answered, you first need to make sure that you are setting the viewport meta tag to trigger mobile devices to use their "ideal" viewport instead of the emulated "desktop width" viewport. The easiest and most fool proof version of this tag is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: PPK, probably the leading expert on how this stuff works. (See http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf).
Essentially, the above makes sure that media queries and CSS measurements correspond to the ideal display of a virtual "point" on any given device — instead of shrinking pages to work with non-optimized desktop layouts. You don't need to understand the details of it, but it's important.
Now that we have a correct (non-faked) mobile viewport to work with, adjusting to the height of the viewport is still a tricky subject. Generally, web pages are fine to expand vertically, but not horizontally. So when you set height: 100% on something, that measurement has to relate to something else. At the topmost level, this is the size of the HTML element. But when the HTML element is taller than the screen (and expands to contain the contents), your measurements in percentages will be screwed up.
Enter the vh unit: it works like percentages, but works in relation to the viewport, not the containing block. MDN info page here: https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths
Using that unit works just like you'd expect:
.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */
It works on a lot of browsers (IE9 and up, modern Firefox, Safari, Chrome, Opera etc) but not all (support info here: http://caniuse.com/#search=vh). The downside in the browsers where it does work is that there is a massive bug in iOS6-7 that makes this technique unusable for this very case (details here: https://github.com/scottjehl/Device-Bugs/issues/36). It will be fixed in iOS8 though.
Depending on the HTML structure of your project, you may get away with using height: 100% on each element that is supposed to be as tall as the screen, as long as the following conditions are met:
The element is a direct child element of <body>.
Both the html and body elements have a 100% height set.
I have used that technique in the past, but it was long ago and I'm not sure it works on most mobile devices. Try it and see.
The next choice is to use a JavaScript helper to resize your elements to fit the viewport. Either a polyfill fixing the vh issues or something else altogether. Sadly, not every layout is doable in CSS.
You can use the viewport height, just set the height of your div to height:100vh;, this will set the height of your div to the height of the viewport of the device, furthermore, if you want it to be exactly as your device screen, set the margin and padding to 0.
Plus, It will be a good idea to set the viewport meta tag:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
Please Note that this is relatively new and is not supported in IE8-, take a look at the support list before considering this approach (http://caniuse.com/#search=viewport).
Hope this helps.
I don't have much time and your jsfidle did not work right now.
But maybe this will help you getting started.
First of all you should avoid to put css in your html tags. Like align="center".
Put stuff like that in your css since it is much clearer and won't deprecate that fast.
If you want to design responsive layouts you should use media queries wich were introduced in css3 and are supported very well by now.
Example css:
#media screen and (min-width: 100px) and (max-width: 199px)
{
.button
{
width: 25px;
}
}
#media screen and (min-width: 200px) and (max-width: 299px)
{
.button
{
width: 50px;
}
}
You can use any css you want inside a media query.
http://www.w3.org/TR/css3-mediaqueries/
I use something like this in my document.ready
var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device
$("#container").width(width+"px");
$("#container").height(height+"px");
Fiddle
You want to set height which may set for all devices?
Decide upon the design of the site i.e Height on various devices.
Ex:
Height-100px for bubbles on device with -min-width: 700px.
Height-50px for bubbles on device with < 700px;
Have your css which has height 50px;
and add this media query
#media only screen and (min-width: 700px) {
/* Styles */
.bubble {
height: 100px;
margin: 20px;
}
.bubble:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble1 {
height: 100px;
margin: 20px;
}
.bubble1:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble1:before {
top: 100px;
border-width: 52px 52px 0;
}
.bubble2 {
height: 100px;
margin: 20px;
}
.bubble2:after {
bottom: -50px;
border-width: 50px 50px 0;
}
.bubble2:before {
top: 100px;
border-width: 52px 52px 0;
}
}
This will make your bubbles have Height of 100px on devices greater than 700px and a margin of 20px;
Whilst I was looking for my answer for the same question, I found this:
<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">
You can use it inside a tag (iframe or img) the image will adjust based on it's device.
Try giving your divs a width of 100%.
Simple:
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />
Cheers!
Hi I am making a responsive site, and using media query for that following is my code:
(LINK)
#media screen and (max-width:960px){
/*Here Goes my code for screen size 960px */
}
#media screen and (max-width:700px){
/*Here Goes my code for screen size 700px */
}
#media screen and (max-width:625px){
/*Here Goes my code for screen size 700px */
}
I have given min-width to body as 250px
But still I am getting a horizontal scroll on Opera-mini, is there any other hack that I should I use to make media query work on opera mini.. this is the link if want to see on your opera mini mobile LINK
I had the same issue.You can make your body tag's overflow to hidden
Add this in your site's head tag, may be it will work: <meta name="viewport" content="width=device-width"/>
is it working ?
I'm developing a site that is 600 pixels wide and using responsive queries to make it fit in different devices. I'm using the following code:
<meta name="viewport" content="width=device-width" />
#media only screen and (min-width: 320px) and (max-width: 480px) {
/* iPhone */
.container { width: 100%; max-width: 480px; }
...
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
/* iPad */
...
}
I have a problem with the iPad, though. This device viewport is 768 pixels wide, and therefore the site renders correctly but is shifted to the left because its width is narrower.
My question is, is there a way to center the site or alternatively make it fill the whole iPad screen?
Thanks in advance
Try this:
<meta name="viewport" content="600" />
More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Or to centre the container (assuming it's 600px wide)
.container {
width:600px;
margin:0 auto;
}
Though it may be worth making the site larger in the first place.
Why make the site 600px wide? You should make the site fill the 100% of the viewport by default, and then adjust the margins around the content, font-size, the size of the images etc. for each screen size so that the content adapts.
You could take this site as example. If you try making the browser window bigger and smaller you'll see that all the content adapts (and even a mobile menu appears when the viewport is that small) All of that is accomplished using media queries for different screen sizes.
(Sorry about my syntax)
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.