You are probably missing the viewport meta tag in the html head:

     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

Without it the device assumes and sets the viewport to full size.

More info [here][1].


  [1]: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

I have also faced this problem. Finally I got a solution.
Use this bellow code. Hope: problem will be solve.

`&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, maximum-scale=1&quot;&gt;`

Though it is answered above and it is right to use

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;

but if you are using React and webpack then don&#39;t forget to close the element tag

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;

**Responsive meta tag**
 
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `&lt;head&gt;`.

    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
    
 


Suppose you have a repository at `github.com/someone/repo` and you fork it to `github.com/you/repo`. You want to use your fork instead of the main repo, so you do a

    go get github.com/you/repo

Now all the import paths in this repo will be &quot;broken&quot;, meaning, if there are multiple packages in the repository that reference each other via absolute URLs, they will reference the source, not the fork.

Is there a better way as cloning it manually into the right path?

    git clone git@github.com:you/repo.git $GOPATH/src/github.com/someone/repo

Using forked package import in Go

I was surprised this didn&#39;t show up in my search results, I thought someone would&#39;ve asked this before, given the usefulness of move semantics in C++11:  

### When do I have to (or is it a good idea for me to) make a class non-movable in C++11?

(Reasons *other* than compatibility issues with existing code, that is.)

When to make a type non-movable in C++11?

I have a website which must be responsive for mobile phones. I&#39;ve created it using my desktop. When I adjust browser windows it&#39;s working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it&#39;s not responsive to the mobile view.

What could be the wrong?

Responsive web design is working on desktop but not on mobile device

<p>I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.</p>
<p>What could be the wrong?</p>


I&#39;m trying to make some of my libraries work with touch devices, but I&#39;m having a hard time trying to figure out how they&#39;re supported and how they work.

Basically, there are [5 touch events][1], but it seems there&#39;s consensus among mobile browsers only on the `touchstart` event (duh). I&#39;ve created a [fiddle][2] as a test case.

I&#39;ve tested this on my Galaxy Note with Android 4 on board, but you can check the link with a desktop browser too.

The goal is to try to figure out how to handle taps, double taps and long taps. Nothing fancy.

Basically, this is what happens:

The **Android stock browser** doesn&#39;t fire touch events. It just tries to emulate mouse clicks with taps, firing `mousedown`, `mouseup` and `click` events consecutively, but double taps just zoom in and out tha page.

**Chrome** for Android fires the touchstart event when the finger touches the screen. If it&#39;s released soon enough, it fires then `mousedown`, `mouseup`, `touchend` and finally `click` events.

In case of *long tap*, after about half a second it fires `mousedown` and `mouseup`, and `touchend` when the finger is lifted, with no `click` event at the end.

If you *move your finger*, it fires a `touchmove` event a couple of times, then it fires a `touchcancel` event, and nothing happens afterwards, not even a `touchend` event when lifting the finger.

A *double tap* triggers the zoom in/out features, but event-wise it fires the combo `touchstart`-`touchevent` twice, with no mouse events fired.

**Firefox** for Android correctly fires the `touchstart` event, and in case of short tap fires `mousedown`, `mouseup`, `touchend` and `click` afterwards.

In case of *long tap*, it fires `mousedown`, `mouseup` and finally `touchend` events. It&#39;s the same of Chrome for these things.

But if you *move your finger*, if fires `touchmove` continously (as one may expect) but it doesn *not* fire the `touchleave` event when the finger leaves the element with the event listener, and doesn&#39;t fire the `touchcancel` event when the finger gets out of the browser viewport.

For *double taps*, it behaves just like Chrome.

**Opera Mobile** does the same thing of Chrome and Firefox for a short tap, but in case of long press activates some sort of sharing feature that I really want to disable. If you move your finger, or double tap, it behaves just like Firefox.

**Chrome beta** does the usual for short taps, but in case of long taps it doesn&#39;t fire the `mouseup` event anymore, just `touchstart`, then `mousedown` after half a second, then `touchend` when the finger is lifted. When the finger is moved, now it behaves like Firefox and Opera Mobile.

In case of *double taps*, it doesn&#39;t fire touch events *when zooming out*, but only when zooming in.

Chrome beta shows the oddest behaviour, but I can&#39;t really complain since it&#39;s a beta.

**The question is**: is there a simple and way to try to detect short taps, long taps and double taps in the most common browsers of touch devices?

Too bad I can&#39;t test it on iOS devices with Safari, or IE for Windows Phone 7/Phone 8/RT, but if some of you can, your feedback would be very appreciated.


  [1]: https://developer.mozilla.org/en-US/docs/DOM/Touch_events
  [2]: http://jsfiddle.net/cpUsA/4/

Understanding touch events

I want to develop a small 4 screens mobile application.

The technology stack that i want to use is AngularJS, I am good with C#,
I searched few times and could not find any examples using AngularJS.

The mobile app should be compatible in iPhone, Android, Windows 8.

What are all the technologies that i need to use.

Any reference would be helpful.

Mobile Application using Angular JS

To my problem, i have one link `&lt;a href=&quot;http://www.youtube.com/embed/YT-ID&quot; class=&quot;overlay_video&quot;&gt;&lt;/a&gt;`. I want to play the video by clicking the link in a fancybox overlay window. This is not a problem. The problem is the parameters, for example &quot;autoplay&quot; or &quot;autohide&quot;.

The following link don&#39;t work:

    &lt;a href=&quot;http://www.youtube.com/embed/YT-ID?autoplay=1&quot; class=&quot;overlay_video&quot;&gt;&lt;/a&gt;


The Overlay-Window opened, but the video is not playing automatically.

**EDIT: I want to use the HTML5 Player on mobile devices. On a desktop-browser it works with the parameters, but not on mobile devices.**

Youtube autoplay not working on mobile devices with embedded HTML5 player

I understand that mobile safari has a lot of bugs around fixed elements, but for the most part I&#39;ve managed to get my layout working correctly until I added a much needed text input to the fixed navigation at the bottom. Now when the user focuses on the text input element and the virtual keyboard appears, my navigation, which is otherwise always fixed at the bottom of the page, jumps up to a really strange spot in the middle of the page.

![enter image description here][1]


  [1]: http://i.stack.imgur.com/MB59e.jpg

I&#39;d add some of my code to this post, but I wouldn&#39;t be sure where to start. That navigation is fixed at the bottom and positioned to the left and bottom 0, and 100% width. From there, I don&#39;t know what&#39;s going on, I can only assume it&#39;s a mobile safari bug.

It also appears to lose it&#39;s position fixed and become relative, only while the text input element is focused on and the virtual keyboard is open.

How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Im building web app which is mainly for mobile browsers. Im using input fields with number type, so (most) mobile browsers invokes only number keyboard for better user experience. This web app is mainly used in regions where decimal separator is comma, not dot, so I need to handle both decimal separators.

How to cover this whole mess with dot and comma?


My findings:

**Desktop Chrome**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;455&quot;
- I can not get the correct value from input


**Desktop Firefox**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;4,55&quot;
- Thats fine, I can replace comma with dot and get correct float


**Android browser**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- When input loses focus, value is truncated to &quot;4&quot;
- Confusing to user

**Windows Phone 8**

- Input type=number
- User enters &quot;4,55&quot; to input field 
- `$(&quot;#my_input&quot;).val();` returns &quot;4,55&quot;
- Thats fine, I can replace comma with dot and get correct float


What are the &quot;best practices&quot; in this kind of situations when user might use comma or dot as decimal separator and I want to keep html input type as number, to provide better user experience?

Can I convert comma to dot &quot;on the fly&quot;, binding key events, is it working with number inputs?



EDIT
----

Currenlty I do not have any solution, how to get float value (as string or number) from input which type is set to number. If enduser enters &quot;4,55&quot;, Chrome returns always &quot;455&quot;, Firefox returns &quot;4,55&quot; which is fine.

Also it is quite annoying that in Android (tested 4.2 emulator), when I enter &quot;4,55&quot; to input field and change focus to somewhere else, the entered number get truncated to &quot;4&quot;.

How to handle floats and decimal separators with html5 input type number

I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;

But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?

Bootstrap Responsive Text Size

I&#39;ve created a few responsive sites but am rather new to responsive site development. In my CSS 99% of my values are in ems or percentages. I am using media queries (both max-width and max-device-width) to make layout changes. I have not included a viewport meta tag and it works perfectly on iOS, a number of Android phones and tablets that I tested on, and all desktop browsers. 

Adding a meta tag breaks my site. Am I doing something wrong, or doing something right so that I don&#39;t need to include it? I&#39;m confused as to why it seems to be a best practice, as it&#39;s breaking my stuff.

Am I missing something?

Is the viewport meta tag really necessary?

In this example:

**THE CSS**

    h1 { font-size: 2em; }
    .smaller { font-size: 0.5em; }

**THE HTML**

    &lt;h1&gt;Hi, I am a &lt;span class=&quot;smaller&quot;&gt;toad&lt;/span&gt;&lt;/h1&gt;

Will the word &quot;toad&quot; be 0.5 times 16px (the browser&#39;s standard font-size) or will it be 0.5 times 2em (the font-size of the h1)?

What is the context of em?

I&#39;ve created a site using the **Zurb Foundation 3** grid. Each page has a large `h1`:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      font-size: 100%
    }

    /* Headers */

    h1 {
      font-size: 6.2em;
      font-weight: 500;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;twelve columns text-center&quot;&gt;
        &lt;h1&gt; LARGE HEADER TAGLINE &lt;/h1&gt;
      &lt;/div&gt;
      &lt;!-- End Tagline --&gt;
    &lt;/div&gt;
    &lt;!-- End Row --&gt;

&lt;!-- end snippet --&gt;

When I resize the browser to mobile size the large font doesn&#39;t adjust and causes the browser to include a horizontal scroll to accommodate for the large text.

I&#39;ve noticed that on the **Zurb Foundation 3** Typography [example page][1], the headers adapt to the browser as it is compressed and expanded. 

Am I missing something really obvious? How do I achieve this?


  [1]: http://foundation.zurb.com/sites/docs/v/3.2.5/typography.php

Responsive font size in CSS

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I&#39;d like to do something like:

    footer {
      width: 100%;
    }
    
    .tablet {
      footer {
        width: 768px;
      }
    }
    
    .desktop {
      footer {
        width: 940px;
      }
    }

At the end something like this should be the result:

    footer {
      width: 100%;
    }
    
    @media screen and (min-width: 768px) {
      footer {
        width: 768px;
      }
    }
    
    @media screen and (min-width: 992px) {
      footer {
        width: 940px;
      }
    }

.tablet could look somehow like this:

    @media screen and (min-width: 768px) {
      .tablet {
    
      }
    }

Hope somebody has a nice idea!



Content Type	Original Author	Original Content on Stackoverflow
Question	Tadas Davidsonas	View Question on Stackoverflow
Solution 1 - Mobile	Agush	View Answer on Stackoverflow
Solution 2 - Mobile	Saiful Islam	View Answer on Stackoverflow
Solution 3 - Mobile	Shadab Ahmed	View Answer on Stackoverflow
Solution 4 - Mobile	Marcelo Austria	View Answer on Stackoverflow

Responsive web design is working on desktop but not on mobile device

Mobile Problem Overview

Mobile Solutions

Solution 1 - Mobile

Solution 2 - Mobile

Solution 3 - Mobile

Solution 4 - Mobile

When to make a type non-movable in C++11?

Using forked package import in Go

Attributions