Mobile Page in Chrome Simulator

Question

The sites I am developing have presented some problems. I believe it is because of my inexperience in mobile pages - responsive.

I make my websites in Mobile First. And to test the site I use the Chrome simulator for handheld devices, in Inspect Element.

To make the CSS styles I use a program called Codekit. How I usually do my styles in LESS, this program pre-processes the code. And it has some options for that style to work in several browsers.

So, for example, if I type in the LESS:

transform: scale(0);

In the compilation will return:

transform: scale(0)
-webkit-trasnform: scale(0)
-moz-transform: scale(0) 

Anyway, you got it. It already converts the code to work on other browsers that don’t have support for such a CSS property.

Hence what happens:
I put a h1 on the site to stay in two lines. The title has 4 words, so it would be two in the first and two in the second line, since I determined a width:70% on a screen of 320px;, namely, a iPhone 4.

Then in the simulator is right. But when I open the iPhone is in three lines. Two on top, one in the middle and one below.

And this happens to padding also. It has element that I give a padding:10px;. In the simulator works, but the iPhone does not work padding in some of the corners. It seems that there is no room for that element to give padding.

I don’t know why this happens. Some of the problems I solved using this meta-tag :

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

And in the CSS file I put it like this: <link media="all" type="text/css" rel="stylesheet" href="css/main.css">.

1 - Why these problems happen ?

2 - It is normal ?

3 - Must I go adapting ? Font size, element size, spaces ?

Answer 1

Dude has a lot of points that need to be reviewed in this whole context. Come on:

1. Web Responsive is not fully tied to Web Mobile
   Web Responsive is you deliver the best experience regardless of the type of user access, points: Semantics / Accessibility / Image Scenario / Progressive Enhancement...

2. Mobile First is only one approach
   To test you would need a Device Lab, which is extremely expensive, so it ensures that it works in the main Vices, and start testing for what you already have in hand External device of your choice.

3. Use program to inject prefixer being that you use pre professor
   Simple solution, using Less, creates a utility mixin that does this for you, or at worst creates a snippet in your editor. Forget this codekit mode mom, who pre processes your . Less to . css is the javascript you link in the file or you can configure a task Runner to compile. To help you. Mixins utility full ready, copy Paste

4. Breakpoints with media queries
   Start injecting where your layout breaks, don’t go out making media queries for everything have a strategic base starting point.

5. Viewport that’s the key word
   No point you put only the meta tag and think it is magic, you need to know what is the viewport, you who say to him through the attribute "containt" deliver this responsa to him, because it is unfeasible for you to predict the Scenery of sizes of Vices (viewport), uses flexible value "width-device-width" this will take the size of the user’s device, the parameter initial-Scale is additional is to refer to the browser to open with set size, for you to get an idea the metag tag viewport is not even official was invented by Apple and adopted as a standard by others. For peace of mind it should already work if your code is round: content="width=device-width, initial-Scale=1.0"

But that’s it, it’s hard to evaluate your code without seeing it, post the link to github whatever, and send it to us to see or go up somewhere. I hope these guidelines have helped you. Abs