View-JS - Easy change Mobile and Desktop Style

Set the document style for mobile and deskop in the same document

Have you ever encountered the problem that @media only screen is displayed correctly, but is still looks completely differently on your mobile and desktop?

This is where View-JS comes in. With the script View-JS you can easily define styles for computers and mobile phones

What is View-JS?

View-JS is a free add-on for your website that allows you to easily determine which styles are for the desktop and which are for a mobile device.

We will prove this with a simple example:

<script src='https://darkintaqt.com/l/vjs/'></script>

<style mobile>
* {
	background: green;
}

// If you're using a mobile device, the background will be green. 

</style>


<style desktop>
* {
	background: yellow;
}

// If you're using a computer/laptop, the background will be yellow. 

</style>

<style>
* {
	margin: 0;
}

// In both cases the margin of body is set to 0. 

</style>

The example above outputs something like this:

As you can see, the color for the computer has been set to yellow and for mobile to green.

The same works for external Styles.

<link rel='stylesheet' href='yourpath.css' mobile>

<link rel='stylesheet' href='yourpath.css' desktop>

If you're still interested, read on how to use the code.

How can I use View-JS?

Its quite simple! Just add the script below to the head tag in your code and you can start!

After adding the script to your head tag, add the <strong>mobile</strong> or <strong>desktop</strong> attribute as in the example above in the <style> or <link> tag. More examples are below. If you find any issues, visit me on GitHub.

View-JS will update itself, if you don't want any changes you will need to download the script and use the downloaded version.

One of these scripts must be placed in the head tag.

<script src='https://darkintaqt.com/l/vjs/'></script>

<script src='https://darkintaqt.com/projects/view-js/view.js'></script>

Without the Script View-JS does not work!

How does View-JS work?

View-JS looks for the mobile or desktop attributes in style elements in your source code and inactivates them necessary if the correct device type is not used.

No further Javascript add-on is required. In addition, nearly no computer power is used.

If no attribute is specified, the style is used for all device types.

Examples

<!DOCTYPE html>

<html lang='en' dir='ltr'>

<head>

  <meta charset='utf-8'>

  <title>View-JS</title>

  <script src='https://darkintaqt.com/l/vjs/'></script>

  <style>

    div {

      font-size: 20px;

    }

  </style>

  <style mobile>

  div {

    font-size: 30px;

    }

  </style>

</head>

<body>

  <div>I can change the FontSize for mobile</div>

</body>

</html>