Question: We recently developed a website that essentially has 2 modes, mobile and a tablet + desktop one. The css file is laid out with mobile rules first, then there is a breakpoint for any sizes above 640px, so we could show the desktop version to the 7" tablets when on landspace.

However, although it is working great for all iphones, my galaxy s4, even the windows phone and of course for the ipad and desktop, some mobile phones pick up the desktop styles, essentially showing the desktop version, namely the galaxy s2 and the galaxy s3 among others.

As i said, my css code is built mobile first, so all mobiles with a width of less than 640px (pretty much all) should not pick up the desktop styles, the media query is as follows:

```
@media all and (min-width: 641px) { .... }

```

So i do not really understand why.. any ideas?

edit: I forgot to add we have added a conditional that will check whether the size of the device is larger than 640, in which case it sets the viewport size to the full width of the website so it scales down on tablets, or else it just sets it to device-width. 

```
<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
if (screen.width > 640) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=1000');
}
</script>

```

Answer: 
You can use `.trigger` and target your buttons ID:

```
$("#idOfButton").trigger("click");

```

Or the shorthand, just call a `click()` on your target

```
$("#idOfButton").click();

```
Try [trigger()](http://api.jquery.com/trigger)

```
$("#button").on('click',function(){
     $('#fileUpload').trigger("click");
});

```