Mobile Responsiveness - responsive-design

I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?

Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.

Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!

Related

What am I missing to make this show in 1 responsive column on phone?

At http://sallymilo.com/aem/, when I move my browser narrower, this template narrows to one column as I want. On my phone, however, I'm just seeing the whole template on one screen. I'm quite new to responsive design, so I must be missing something obvious to those of you who know better than I. Please advise.
It's an easy fix, you need to have a viewport meta tag in the head of your page, without this the default behaviour of mobile devices is to scale your page to fit the screen.
Here's a starting suggestion:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://css-tricks.com/snippets/html/responsive-meta-tag/ has more details on some of the properties you can set within the meta tag.

Remove responsiveness from the theme?

How to remove responsiveness from the theme.
I have done the following for this
1. removed all the media queries from the style-sheet.
2. remove meta viewport
but it can not remove the responsiveness and website still zoom in the mobile devices .
what is the problem ??
I Feel you need to check initial scale value of your website, you need to check this code once in you page :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
place this code in your head tag.
Hope it's work.

Site zooms out when menu is opened

I'm using Yahoo's PureCSS library along with a plugin for the sidebar and it works great on all browsers except mobile Safari. For some reason, it zooms out whenever the menu is opened. This even occurs in the documentation's example. I have no idea what could be causing this but it's tempting to just call it a browser bug.
I can put together a JSFiddle if necessary.
The viewport meta tag does not contain a maximum scale value. If you update the viewport tag to the following, you won't get the same zooming whenever the user clicks on the menu:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Note the addition of maximum-scale=1 to the end of the string. When this is added, the content slides over instead of zooming out. This was tested against the PureCSS demo page for the Responsive Side Menu, linked to above.
This question actually boiled down to being the same as Does overflow:hidden applied to work on iPhone Safari?. I guess Mobile Safari will zoom out to make room for the menu and the content area when the user opens the menu, unless you do this on a wrapper element:
html,
body {
overflow-x: hidden;
}

WebView Component doesn't handle style in a consistent manner

I cannot begin to understand how the Windows Phone 8.1 "WebView" Component handle styles. I display some very static HTML, nothing fancy, and I did not set any particular CSS style.
Nevertheless, the HTML Tags seem to be handled differently and show up each with a different size or sometimes even a different font.
Here are two examples. On the one on the left, the paragraph written very small is an imbricated pre/code block whereas on the image on the right, it is a simple HTML table.
<pre>
<code>
...
<code>
</pre>
This issue happens with a whole lot of tags, ul/li and blockquotes are doing the same for instance.
I tried handling them each with a CSS rule... which works, but requires different rules / font-size for each tag...
Any idea how to do this?
I encountered the same problem. After several days investigation, I found the CSS style -ms-text-size-adjust is the cause.
By default, -ms-text-size-adjust is auto, and IE will scale the content with some algorithm (mainly the contents that can't wrap, like pre, table, etc, have smaller font size ). If you instead set -ms-text-size-adjust to other value (like 100%, 200%), the problem will disappear.
Another method I found to fix this is to set the viewport with the following:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...

Viewport Settings For Responsive Design

Okay,
So I am designing a site which needs to be responsive.
The design is nailed down and I have just been doing some testing.
In order to get my media queries for mobile devices to work, think phones not ipad in this instance, I have set up a media query and everything looks perfect.
In order to make use of these media queries, I use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
However, this also has an impact on the ipad version, specifically the portrait version of my site which I do not need to touch.
I guess my question is how can I control which devices pick up the viewport settings?
Ideally I'd like to be able to do this on a 'less then this amount of pixels' basis but I'm open to all suggestions.
Thanks for all contributions in advance.
Remember to use comma separators on meta elements as they are considered key-value pairs:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
Try using maximum-scale = the maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all. You can even make it to where the user cannot zoom - user-scalable= no
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
should work on every devices resolution.
The zoom being deactivate though.
Use css media queries to adjust display for every width and height.

Resources