Mobile Page in Chrome Simulator

Navigation
2

The sites I'm developing are presented with some problems. I believe it is because of my inexperience in mobile - responsive pages.

I make my sites on Mobile First . And to test the site I use Chrome Portable Simulator on Inspect Element.

To make CSS styles I use a program called CodeKit . As I usually do my styles in LESS , this program preprocesses the code. And it has some options for that style to work across multiple browsers.

So, for example, if I type in LESS:

transform: scale(0);

In the compilation it will return: 

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

At last, you understood. It already converts the code to work in other browsers that does not support such CSS property.

That's what happens:
I put a h1 on the site to stay on two lines. The title has 4 words, so I'd have two in the first and two in the second line, since I've set width:70% on a 320px; screen, that is, an iPhone 4 .

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

And this happens with padding too. It has element that gives padding:10px; . In the simulator it works, but the iPhone does not work padding in any of the songs. It seems that there is no room for that element to give padding .

I do not 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 do these problems happen?

2 - Is it normal?

3 - Do I have to adapt? Font size, size of elements, spaces?

    
asked by anonymous 05.08.2015 / 20:43

1 answer

-1

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

  • Web Responsive is not fully Web Mobile
    Responsive web is you to deliver the best independent experience of the user access type, points: Semantics / Accessibility / Images Scenery / Progressive Enhancement ...

  • Mobile First is just an approach
    Doing a test would require a Device Lab, which is extremely expensive, so make sure it works on key devices, and start testing for what you already have in your device inspect of your choice.

  • Use program to inject prefixer where you use pre processor
    Simple solution, is using Less, creates a mixin utility that does it for you, or at worst creates a snippet in your editor. Forget this codekit mom mode, anyone who preprocesses your .less to .css is the javascript that you link in the file or you can set up a task runner to do the compilation. To help you. Mixins full utility ready, copy paste

  • Breakpoints with average queries
    Start injecting where your layout breaks, do not quit doing media queries so everything has a strategic point of departure.

  • Viewport this is the keyword
    It's no use putting only the meta tag and you think it's magic, you need to know what the viewport , you say to it through the " conten t" deliver that responsibility to it, because it is unfeasible for you to predict the device sizes scenario (viewport), use the flexible width-device-width "this will take over size of the user's device, the initial-scale parameter is additional is to refer to the browser to open with set size, so you get an idea the metag tag viewport is not even official was invented by Apple and adopted by default by others. For ease of use so it should already work if your code has round: content="width = device-width, initial-scale = 1.0"

    This is no longer the case, it's difficult to evaluate your code without seeing it, put the github link I know, and have us see or go up somewhere. I hope these guidelines help you. Abs

        
    • 07.08.2015 / 06:19
    Pagseguro + Codeigniter [closed] Updating hierarchical data using hierarchyId