How does a mobile browser work?

Asked

Viewed 108 times

0

In mobile browsers we usually have the Mode Fast, aportuguesando had turned 'Modo Rápido', where, it leaves the websites lighter to be loaded, know that part of this is that the site itself considers access as Mobile access, but another part is the browser itself that changes, you can notice differences on the Facebook site when accessed by Ucbrowser and Opera Mini. Well the question I have is exactly this, how does it work, how can a browser change the code of a page, and how do you do that in code? Another question is how the websites indicate that the access is mobile or not, to see if it activates or not its mobile version, this can only be done with CSS, with the media?

mobile web-application browser

1 answer

3


Like you said, CSS and a way to make responsive layout.

As long as it is programmed for this, the responsive layout automatically fits the user’s device (mobile, desktop, etc...), that is, the responsive site changes its appearance and layout based on the screen size on which the site is displayed. If the user has a small screen, the elements should be readjusted.

But it is not the case of Facebook, because the site is not responsive (media queries are used on responsive websites). What Facebook does is use javascript to verify which device (mobile, desktop, etc...) and redirect to the correct address for the device, which in case would be "http://m.facebook.com".

To check which device the user is using, I know this lib that makes it much easier: https://github.com/matthewhudson/device.js

An example of how to verify which device the user is using:

<script src="device.js"></script>
<script>
    var mobile  = device.mobile(),
        tablet  = device.tablet(),
        desktop = device.desktop();

    if(mobile) 
        alert("Acesso via mobile");
    else if(tablet) 
        alert("Acesso via tablet");
    else if(desktop) 
        alert("Acesso via desktop");
</script>

There are other utilities for this lib, for example, knowing if the user is using android or Ios, etc...

Worth a look at the documentation.

Browser other questions tagged mobile web-application browser

You are not signed in. Login or sign up in order to post.