0

Trying to change the text of a button/link on mobile. However I have no access to the css and it has to be done within. I tried few methods of checking screen-size but it takes no effect. Is there a robust way to do this? It has to be in-html styling.

this is the fiddle file: https://jsfiddle.net/sbwLwg3y/3/

 <script>
      if (screen.width > 470) {
        document.getElementById("changeMe").innerHTML = "link text changed";
      }

    </script>
    <table  width="100%">
      <tr>
        <td align="center">
          <table cellspacing="10">

            <tr>
              <td bgcolor="#E2A71D" class="innertd buttonblock" style=" background-color: #E2A71D;">
                <a alias="" href="#tag" style=" color: #FFFFFF; background-color: #E2A71D;" title="Request a call back">btn1</a></td>
              <td bgcolor="#E2A71D" class="innertd buttonblock" style="  background-color: #E2A71D;">
                <a id="changeMe" class="callnow1" href="tel:345345345" style=" text-decoration: none; display: block; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 15px; font-weight: 600; color: #FFFFFF; ">btn2</a></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
jhpratt
  • 5,613
  • 16
  • 32
  • 43
agc
  • 123
  • 1
  • 11
  • This might help you https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery it seems that you can do it via JS – Branduo Nov 09 '17 at 21:51
  • Can you not use a – t-jam Nov 09 '17 at 21:51

1 Answers1

0

Try using:

Javascript:

<script>
    if (navigator.userAgent.match(/Mobile/)) {
        document.getElementById('changeMe').innerHTML = 'link text changed';
    }
</script>

jQuery:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $("#changeMe").text("link text changed");
}
  • I have tried that script (its the same one from another answer) can't seem to get it to work with it. – agc Nov 09 '17 at 21:56