i have a WordPress website with this media query
#media screen and (min-width: **312px**) { }
now there are two terms
1: window size for ( 320x533) = window size 320x533 / view port 304x420
2: view port size for ( 320x533) = window size 336x646 / view port 320x533
what is windows size and view size
What you should care about in web design is the viewport. The viewport is the visible area inside the browser window which renders websites. Often the viewport can be slightly obstructed (and therefore is smaller) by a scroll bar.
A viewport of 320px width with a scroll bar may actually only end up being 303px after the scrollbar has been considered.
Related
I have a page with a central iFrame flanked by two sidebars left/right, and I am trying to make the iFrame's content responsive. I already have the parent window set up with #media queries in the CSS stylesheet, so that it changes the layout when the viewport width is reduced (I'm working PC screen down, not mobile screen up). This layout change is (among others) a switching of the sidebars from left/right to top/bottom relative to the center iFrame for the mobile view.
The issue is the iFrame's viewport. When I use #media's max-width in the iFrame's CSS sheet, it uses the inner width of the iFrame as viewport width. This is causing me trouble because when switching the sidebars in the parent window to top/bottom positions, the iFrame's size goes from ~540px in the smallest desktop view to ~860px in the largest mobile view, so I can't set a #media max-width query without creating an overlap on either side - displaying either the PC-intended iFrame CSS on the mobile parent CSS, or vice versa.
I would also prefer not to use max-device-width instead, because then the content no longer responds to resizing of the browser window on a PC, since it refers to the screen size rather than the browser window size. (This is important to me because it allows me to quickly test the responsiveness and allows for people using the page on a non-maximised browser page.)
Is there a way to make an iFrame's content responsive to the size of the parent window, rather than itself or the screen?
I have control over all the elements involved, so if this can't be done I can also change the iFrame into a PHP include statement and put the center panel content on the page that way.
I made a small website where width of certain elements are given in vw. It looked all good in my laptop. But when viewed in a 1920 screen, I could see the content is over stretched. I want to know if there is a way to stop viewport width and viewport paddings I have used in my website to stop stretching the elements after a while.
You can achieve this by setting max-width: value to your container in you css file
Also to set diverent styles after certain screen width you can yuse media query
#media(min-width: 1000px){
//your style
}
I have laptop screen with resolution 1366*768 pixels , that mean screen width is 1366 pixels and height is 768 pixels , that is fixed when i set my screen resolution to 1366*768, If i have a webpage which have css property
#media screen and (max-width:1366px){
//css1
}
#media screen and (min-width:1361px) and (max-width:1500px){
//css2
}
That mean if device 's screen has a width of 1366px or lesser css1 will apply to that page , and if the screen is larger than 1366px then css2 will be apply , . So for my laptop screen css1 should be applied because it has screen width of 1366px .
At ZOOM:100% , this works fine , But if I zoom out , css2 starts applying , I can't understand how this can be happen , my screen width is fixed, So how Zoom out can increase my screen width , .
I become very confused , I am trying to understand this screen resolution, pixels, zoom, for very long time now ,But can't really understand how they works , please help#
Media queries limit the layout width and if this value is reached (for example by reducing the window, or when viewed on a device with the specified size) is already used by a different style. that is how media queries should work.
When you zoom out you're increasing the viewport size. When media queries refer to screen they're talking about the browser's viewport width, not your physical screen's width.
I am building a site that uses a very large header image. When the site is viewed on mobile I would like to scale that header div's height to be half of what is is on desktop.
What is the best way to do this with bootstrap 3?
A simple media query will work:
#media all and (max-width: 480px) { // or whatever size you want to target
// change header size
}
I want to draw a complex chart on a canvas element.
The canvas has width and height 100%. The div container of the canvas has a width of 100% and height 640 pixel for mobice device 1. (see below)
Lets assume I draw a rectangle:
void rect(x, y, width, height)
context.rect(0,0,100,640);
For mobile device 1 I have this context:
width: 480px,
height: 640px
For mobile device 2 I have this context:
width: 1024px,
height: 768px
When I switch now to mobile device 2 my context.height changes from 640px to 768px. The result is that the rectangle with a height of 640px leaves now a gap between it and the top margin of the gap: 768px - 640px = 128px gap.
Question 1)
So the canvas from itself is not able to stretch its content? I do not ask for stretching the canvas itself, thats easy, I just want to stretch the content inside the canvas.
Question 2)
When Question1 answers is "No it can not stretch its content!" then How do I correctly resize its content? Is there a redraw event where I can hook into when the mobile device changes from portrait to landscape view? Or is it up to me to take the height of 640px as 100% and divide the content areas in my canvas into x-% areas and compute for example what is 40% width in pixel related to the 100% (640px) ? This way the content would scale up/down when the height of the mobile device changes.
Q1: You can "stretch" (==scale) the canvas content using canvas context.scale(scaleX,scaleY).
Note: The content will distort if scaleX is not equal to scaleY.
It works like this:
context.clearRect(0,0,canvas.width,canvas.height);
context.scale(768/640, 768/640);
// redraw all your content which will now be 768/640 larger
// and, of course, do this in reverse if the device is reoriented the other way.
One problem with mobile reorienting (portrait/landscape) is that multiple resize events will be called as the device reorients.
To prevent this, you might look at jquery mobile's throttledresize event which executes just once for each reorientation. jQuery has the added benefit of simplifying cross-browser issues which do arise when reorienting and resizing.
If you don't want to add a full library to your project, throttledresize works by starting a timer when it notices resizing and executes a callback function when the timer expires. That way you avoid the multiple resize events that occur with mobile.
You can maybe try to transform the canvas element using CSS "transform"
#canvas {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_scale