I created simple web-map application,It works perfect on Desktop,but when I open on mobile or tablet then their is size problem.

enter image description here When I open web-map in mobile then all the web-map content size are changed. I also added this html code

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

in my file but still not showing proper output.

How I convert web-map to responsive web-map.How to test it on local machine.

closed as off-topic by Ian Turton Jun 15 '17 at 7:53

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • does Openlayers example map show the same on your device? – Chase Choi Jun 15 '17 at 4:42
  • 1
    This is more of a web development question. – Alex Leith Jun 15 '17 at 4:58
  • On Desktop shows proper but in mobile size got changed – Seema Barate Jun 15 '17 at 5:00
  • did you add that <meta> in <head> tag? – Chase Choi Jun 15 '17 at 5:41
  • Yes,But still not working. – Seema Barate Jun 15 '17 at 5:43

Continues from my comment, the order you will follow

first, click 1 then shows like below. it looks very small not suitable for mobile resolutions
enter image description here

move to 2 tab and rightclick 3
enter image description here

select 'edit as html' and add the <meta> code
enter image description here

and click outside of the text editor area then it changes the resolutions for mobile device
enter image description here

  • Ok Chase,But in mobile it display like this only.Two divs are overlapping. – Seema Barate Jun 15 '17 at 7:05
  • That is your choice for mobile. you can change the styles up to the screen size. – Chase Choi Jun 15 '17 at 7:10
  • and the thing you need is no more about map. – Chase Choi Jun 15 '17 at 7:11
  • Ya but on desktop shows properly.So same size i can't display on mobile? – Seema Barate Jun 15 '17 at 7:12
  • if your mobile devices' screen size is the same as desktop, it'll be the same looking. but mobile devices' screen size is smaller. so you should hide or move it small or something. – Chase Choi Jun 15 '17 at 7:16

To view the map on a 'virtual' mobile phone or tablet, you can use the Chrome developer tools and click the button 'Toggle Device Toolbar' (see the image below).

What you're asking is a basic web development question, though, and the answer varies depending on what you're using for your UI.

I like using Bootstrap for the UI components of my web map, and I learnt how to put something together by pulling Bootleaf apart. Maybe have a look at what Bryan did there. Otherwise, if you have a specific question, ask another one.

Toggle Device Toolbar

  • Thanks,I am new for web development, actually it's my first website.I am using HTML5,CSS and JS. In these langue how i convert it,For mobile application, i need to use bootstrap? – Seema Barate Jun 15 '17 at 5:08
  • please is there any idea how to do it,help me anyone. – Seema Barate Jun 15 '17 at 5:18
  • You can do it, @SeemaBarate. I don't think people will be able to help. Just keep working on it, and it will be come clear. – Alex Leith Jun 15 '17 at 22:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.