It is a common question to resize an iframe to fit its' content, however I want instead to set the content to fit specific dimensions.
Essentially my application captures HTML, along with user_1's screen dimensions. So that user_2's sees the same HTML and screen dimensions.
In cases where user_1's screen dimensions are larger than user_2's screen dimensions, user_2 would see an iframe with a horizontal scrollbar. In cases where user_2's screen dimensions are smaller than user_2's screen dimensions, user_2 would see an iframe without a horizontal scrollbar and centred content.
Taking into account things like media queries where smaller screen resolutions add for instance a burger menu. I'd like for the second user to see the same thing.
What effectively I'd love to do is set the iframe's inner scrollWidth.
The only thing I've been able to suss out is that setting the actual width of the iframe itself is the best way to start. Then perhaps in cases where the content needs to expand beyond the width of the iframe, to set the width of the html or body element inside the iframe.
But that too, introduces media query issues. Where maybe the iframe on user_2's screen is small enough to trigger a burger menu, even though the body's width was set to expand beyond the iframe's width.
Is there any way I can set the iframe to be any width I want, but for the content of the iframe to behave as though the iframe was larger? I hope I've explained my problem in a way that makes sense.
I want user_2 to see the same thing user_1 saw.
Related
Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.
btw, I am already using media queries and they're nice but don't do what my boss wants.
The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.
This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)
The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).
Use it like so (but place this below all of your CSS code):
#media only screen and (max-width:480px){
//The elements you want to change here
}
As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.
Example scenario:
div {
width:600px;
height:400px;
}
#media only screen and (max-width:600px){
div {
width:100%;
height:50%;
}
}
In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.
So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.
There is a more in-depth article here.
Demo
I want to make responsiveness behaviour like at this site.
There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".
You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.
UPD
I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean
Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:
It is important to understand the function of the meta viewport.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
-Source
This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).
The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.
The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:
body {
min-width: 300px; /*You'll have to set the value you wish here*/
}
The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:
You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.
The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).
This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.
The solution was simple. I needed just set body min-width
I want a page with a fixed pixel size to always have the same percantage hight. I cant just use % or any other relative units since I already made the whole site in pixels.
Means when I have a div with a hight of 1500px and view it on a 1366x768 screen the whole 1500px div should still be visable completely.
The effect I want to accomplish is something similar to a browser zoom.
You could try min-height: 1500px; on the div, then put overflow-y: auto on the body or html elements.
If you want something to dynamically resize depending on the window height you'll want to look into either CSS flexbox, using the vh sizing, or using javascript to detect window resizing.
You could use the viewport meta tag for that. Just remove the "initial-scale=1" part and the page should always be rendered to fit the screen.
You should note that this might result in the page being shown very small which can lead to problems when people want to access it with a smartphone for example. If you want to optimize your page for different devices and screens, I suggest you make yourself familiar with responsive webdesign.
Something like height: 100vh; would make the object's height 100 percent of the viewport height. It seems like there is no way around switching from px to something else.
I am reading A tale of two viewport and I could not follow the explanation at Consequences. He claims that when one zooms into his page, the upper right corner is not blue anymore even though it has width:100%.
I do not understand why this should be the case. In fact, I cannot even reproduce it:
Could someone explain me on a more simple example what the author's point is?
You can see the effect by using "browser zoom" (not pinch zoom), i.e. ctrl+/-. You need horizontal scrolling to see the effect in the author's example.
When you hit ctrl+ a few times, you're increasing the size of a CSS pixel. This means fewer CSS pixels will fit into your browser window (viewport) and thus zooming in shrinks your viewport. For example, say your viewport is initially 800px wide. You zoom in to 200%. Since each CSS pixel is now double the size, your viewport only fits 400px.
The article's point is that even though the viewport shrunk, the content on the page hasn't (in terms of CSS pixels), it's still ~800px (or whatever the author specified it to) since only the pixel size has changed. This means sizes that rely on the viewport will now look disproportional to the rest of the content. In his example, the top bar is set to fill the viewport width 100%. When the content becomes larger than the viewport, the bar will not extend the same width as the content.
I 've created a site using Dreamweaver, and all my images have absolute position with % metrics. it expands proportionally on wider screens, but everytime I try to resize and shrink browser window it just becomes a mess with all the images fallen in one narrow window. How can I rebuild my design so it shrinks in a browser window in a way that when it is too small for an element, it just wouldn't fit. Do I have to use fixed pos-ing or any other type of pos-ing? Whats the usual way web designers do the sites?
P.S. my site contains text and abs. images, as well as fixed image that scrolls with the screen. What should I use to keep it that way but make a decent view in all screen sizes?
Use media queries or place a min-width on either the body or the element in question. For example placing min-width:900px on the body will stop the entire body from re-sizing below 900px width. (Note: That is not the responsive way to do things. Media queries are a much better practice)