My Question is How would I change the text of a HTML <p> tag when I am on a mobile device like android or iphone?

Here is my current code p tag:

<p>You are on a desktop good</p>

This is the <p> tag I want to appear on Desktop, Tablet and Laptop.

How can I make it so that it says the following on mobile device like android or iphone in Straight Up Javascript no bootstrap just JavaScript?

<p>Please Use a Desktop to view</p>

Please Help

Thank You For All answers

My Question is How would I change the text of a HTML <p> tag when I am on a mobile device like android or iphone?

Here is my current code p tag:

<p>You are on a desktop good</p>

This is the <p> tag I want to appear on Desktop, Tablet and Laptop.

How can I make it so that it says the following on mobile device like android or iphone in Straight Up Javascript no bootstrap just JavaScript?

<p>Please Use a Desktop to view</p>

Please Help

Thank You For All answers

• javascript
• html

• Are you using bootstrap? – Franco Commented Dec 7, 2015 at 23:11
• no i am not using bootstrap – The Beast Commented Dec 7, 2015 at 23:11
• css classes + media queries? – 0x860111 Commented Dec 7, 2015 at 23:12
• What have you tried? Use media queries and show one div at a certain breakpoint and hide the other. – j08691 Commented Dec 7, 2015 at 23:12
• Than you need to use a media query in your CSS file. Do you know what a media query is? – Franco Commented Dec 7, 2015 at 23:12

2 Answers 2

gives a id or specific class to your <p> tag and include the JS after the dom loaded

<p id="changeMe">Services</p>
<script>
if (navigator.userAgent.match(/Mobile/)) {
document.getElementById('changeMe').innerHTML = 'Services Are everywhere';
}
</script>

Or use css Media Queries to show and hide Paragraphs

<p class="desktop"> Services</p>
<p class="mobile"> Services Are everywhere </p>

CSS:

p.mobile { display: none }
@media (max-width: 640px) {
    p.mobile { display: block }
    p.desktop { display: none }
}

You can use CSS media queries, and use elements to show or hide the element based on the screen width.

For example:

p.mobile {
    display: none;
}
p.desktop {
    display: auto;
}
@media screen and (max-width: 480px) {
    p.mobile {
        display: auto;
    }
    p.desktop {
        display: none;
    }
}

Using a desktop and mobile class on everything that should be on desktop or mobile (exclusive) is important, so that this style will work on all of those elements that you want to change.