I read on a website the following:
Mobile browsers render pages in a virtual "window" (the viewport),
usually wider than the screen, so they don't need to squeeze every
page layout into a tiny window (which would break many
non-mobile-optimized sites). Users can pan and zoom to see different
areas of the page.
I don't have much of experience, can someone please explain using other terms. I didn't understand how the mobile create a viewport and then let the user to zoom in that viewport.
It all means that the page it will fit the mobile's screen when using the meta tag , something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
So instead of the page showing like desktop view - all shrinked - and then you have to zoom in (a lot) to read, you can just simply scroll, because the content will fit properly the mobile/tablet's screen.
You may or may not be able to zoom depending on the property you use on the meta tag viewport.
This maximum-scale=1 will allow you to block zoom if your initial-scale=1
Related
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've created the following web page:
http://isometricland.net/games/games.php
The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)
Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.
I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.
Please help!
Try adding the following to your <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
For further information, see Using the viewport meta tag to control layout on mobile browsers.
The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:
<div class="scroll-overflow">
<table>...</table>
</div>
div.scroll-overflow {
overflow-x: scroll;
}
Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.
You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.
Here's a before (left), and after (right).
I'm building a mobile optimized page for a my site. I'm new to mobile web optimization.
Everything looks fine on my dev machine, but when I go look at the page on my android mobile browser it looks absolutely tiny because it forces the full vertical section of text to show up in the browser. This does not happen on my desktop browser. Any ideas how I can stop this from happening and have it just show up with the full width in the mobile browser?
You're missing a meta-viewport tag, try this:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" >
The important part is width=device-width, this will make sure that your HTML takes-up the full width of the screen. The initial and max scale properties are set to one to disable zooming, just change the maximum-scale value to something between one and ten to allow zooming.
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.
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)