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">
Related
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.
Reference image
I am building a dummy website with shapes, but there are some issues with screen sizing.
You can see in the above image that there are some sizing issues with the website when using Chrome DevTools to view how the website would look in different screen sizes.
Source code
I am using the latest version of Tailwind and Next.js, but I still get this annoying whitespace.
Any ideas on how to fix it?
Add the initial-scale and device width properties with your <Head> element to fix the issue - without the initial-scale, the browser does not do its bit to fill in contents to available viewport width's.
pages/index.js
<meta content="width=device-width, initial-scale=1" name="viewport" />
A Detailed explanation of how device width and initial scale work and what viewports actually do with different devices can be reviewed here at MDN
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 am looking for a CSS package that will aid one in building a fluid/responsive layout with scrolling content... I don't know if I'm describing this accurately, but what I mean is represented well here and here.
there are others, but those 2 show it well enough.
Any tips to that? Am I overthinking things, and it's as simple as one big column-less CSS grid (i.e. I could even use twitter's Bootstrap as a starting place)? I've tried some simplistic designs with this, but it never seems to work for every device / every time I resize the screen.
Thanks all for the help.
When doing responsive design, you'll want to make sure you set a meta tag to viewport initial-scale value of 1. Mobile devices tend to pack more pixel values into actual pixels so that they fit on the screen, but if you set the viewport's initial-scale value to 1 then you're essentially telling the device you want the page to be viewed on at a 1 to 1 pixel ratio.
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" >
I want to change the look of a website on the mobile Opera browser. I use a user style to change some CSS values, this worked well for now, but the page doesn't scale to the devices full width (either orientation).
Since I will only use this for Opera anyways, I can use the Opera-CSS property "#-o-viewport"
Here's a tutorial on how to use it:
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
The page has a fixed width, I still want the device to zoom into the website, so it's as big as possible while still showing the full width of the page.
When I'm trying this, it's not working. The page is shown with the different user style, but the css viewport property won't work the way I intended it to be, the page is shown at a zoom of about 0.4
you could do it with the meta tag viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
#-o-viewport {width: $px}
where $ = the width of the page you're trying to optimize in pixels (e.g. 800)