I want to shrink the entire view when resizing the window. In mobile view, the view should be a shrunken version of the desktop view. Something similar to the https://www.cbioportal.org/ website. If we resize, the entire view is being shrunken. In the frontend i'm using Angular and bulma. How could I achieve this?
Don't use the "responsive" meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
This will revert to default behavior of browser which shows the entire viewport width.
Related
The embedded page has bellow "viewport":
<meta name="viewport" content="width=640, initial-scale=0.45, minimum-scale=0.45, maximum-scale=0.45, user-scalable=no, target-densitydpi=high-dpi">
It's responsive when I open this page in device's browser(iPhone5). But when I embed it inside an iframe it's not responsive.
How can I make my frame responsive for this page?
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
I have tried both min-width , max-width and min-device-width , max-device-width ,but none of them worked on smartphone(tested on iPhone) as expected.Smartphone view remain same when either one is used.I just get the same view as laptop(My laptop 1224px) on my phone but with smaller size.Images would clarify my point.
This is what I get on laptop(browser maximized),when min-width(1224px) is used
View 1
When I use min-width(320px) and max-width(480px) and shrink the browser on laptop,I get this
View 2
which is my expected result on smartphone.But I don't get this view on smartphone,even after using min-device-width(320px) and max-device-width(480px).Both width and device-width gives me view 1 with smaller view on iPhone(smaller images and tiny font)
How to get rid of this problem.
Your help would be greatly appreciated.
Because you said you do not have a viewport meta tag in your head, you will not have consistent scaling in mobile devices. In the <head> of your html, add the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
Source: Using the viewport meta tag to control layout on mobile browsers
I am trying to do a responsive design with using HTML and CSS, here is my problem:
If you only resize the window, the layout fits and if you only zoom, layout fits again, I have no problem with it, but if you zoom when the window is resized, layout breaks a little.
Is it important to find a solution about this? I have no problem with 200%, 300% levels of zoom, mostly 400% or 500% make some problems to me.
In general, a responsive layout shouldn't need to be zoomed because it fits the device/browser window and has been designed to be "finger-friendly". To help with that, you can use this viewport to stop users from zooming:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I'm creating responsive web app for desktop and mobile devices. My problem is I don't know when I need to use *-device-width. Pls explain usecases for *-device-width. Why should I use it instead of *-width?
You use it with a meta tag, which you will add to your head tag
<meta name="viewport" content="width=device-width" />
From Difference between width and device-width in CSS media queries:
device-width is the...
width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Source.
The width...
describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page
box on a printer)
Source.