Chamando CSS apenas quando for mobile

CSS

CSS3

28/03/2019

Gostaria de chamar as linhas de css somente quando for mobile.
Como posso fazer?

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js">
<script type="text/javascript" src="bootstrap/js/npm.js"></script>
<link rel="stylesheet" type="text/css" href="css/principal.css">
Samuel Lopes

Samuel Lopes

Curtidas 0

Respostas

Vinnicius Gomes

Vinnicius Gomes

28/03/2019

Gostaria de chamar as linhas de css somente quando for mobile.
Como posso fazer?

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js">
<script type="text/javascript" src="bootstrap/js/npm.js"></script>
<link rel="stylesheet" type="text/css" href="css/principal.css">


Bom dia Samuel!

Você pode fazer uma verificação com o PHP

<?php
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
    $palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
    $berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

    // Verificando se é mobile
    if ($iphone || $android || $palmpre || $ipod || $berry == true) {
        echo "<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
                    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
 ";
    } else {
        echo "<script type="text/javascript" src="bootstrap/js/bootstrap.min.js">
              <script type="text/javascript" src="bootstrap/js/npm.js"></script>
              <link rel="stylesheet" type="text/css" href="css/principal.css">";
    }
?>


Esse código você pode integrar dentro da tag <head></head>
GOSTEI 0
Bruno Pardim

Bruno Pardim

28/03/2019

Iaew cara,

No seu código css você pode chamar um estilo especifico somente para mobile com isso por exemplo:

Neste caso a MinhaClasse vai ser carregada se meu dispositivo atender essa condição: max-width: 480px

@media (max-width: 480px) {
.MinhaClasse
{
.......
}
}

Dá para melhorar o paramentro, da uma olhada em:

https://getbootstrap.com/docs/4.3/layout/overview/
GOSTEI 0
POSTAR