Displaying of different prompt message in different screen resolutions using html

Question

Ex: On click of button, In desktop version screens it should display prompt message as ' Hi'. . same on click in mobile screen sizes it should display prompt message as "Hello".

you can use modal of bootstrap. It's responsive for all kinds of screen. — Akhter Al Amin, Jan 26 '17 at 07:15

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

Check this answer out. Then after getting the width of your screen you can

getElementById("my_element").innerHTML() and set whatever you want to.

edited May 23 '17 at 12:24

Community

1
1

answered Jan 26 '17 at 07:21

catchiecop

388
6
24

score 0 · Accepted Answer · answered Jan 26 '17 at 07:26

You could do something like this:

var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

$('#btn').on('click', function() {
  if (width > 480 && height > 800) {
    alert('hi');
  } else {
    alert('hello');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btn" value="Click me" />

Displaying of different prompt message in different screen resolutions using html

2 Answers2