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.
Related
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
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 can't figure out the behavior of the "emulate viewport" option in the new Chrome's device emulation panel.
When unchecked, everything works as it should. I can visualize the device viewport in my browser and the changes I make in the code get properly visualized in the browser.
When the option is checked, though (as it is by default), it messes up my layout completely. Horizontal scrolling bars appear (even using .container{max-width: 100%;} or overflow: hidden), the font gets rendered way bigger than it should, and the browser seems to ignore my changes to the CSS.
In the documentation, I read:
Emulate viewport - zooms the page out to the physical default viewport of that device. In the case of the Nexus 4 this is 768x1280.
Can someone please translate in plain English what kind of behavior this option activates, and why should I want to keep it flagged?
I had similar problem. When I would simply change the resolution of the window everything would render nicely according to the screen width. But whenever I would try to emulate in Chrome with device emulator, columns would not change their size and display on the screen with their physical width. Then, I figured out to add the following line to the section of the html file. Hope that helps.
<meta name="viewport" content="width=device-width, initial-scale=1">
I have been poking at this for hours now.
I used the wordpress twentythirteen theme as a starting point for a landing page I am working on. I have it looking exactly how I want it on desktop, but when I switch to my iphone, the footer doesn't render properly and there is a line that runs vertically along the right side of the frame.
Website: detroitvehiclewraps.tectonicsindustries.com
I have gone through everything I can think of and cannot make the problem go away. I deleted the PHP that detects mobile, as for the time being I want the site to display identically on mobile and desktop. Any help any of the CSS wizards on here could provide would be appreciated. I know I am just missing some inane little thing and I am absolutely losing my damn mind.
Thank you.
Try to insert a viewport meta tag into the <head>:
<meta name="viewport" content="width=990px, user-scalable=yes">
Iphone's default viewport is 980px wide, your content is 990px wide so the device scales it down. This is the "line" (10px) you observed on the right (the background color of body is white).
Note: you are mixing fluid and fixed with layout, try to clean it up a little bit. You should check out media queries too.