2

I'm developing a web app with react strap. I am using 2 SVG's for background and I want one to be shown only when user access it from pc and another one should only be shown when user access it on Thier phone. So basically I want the 1st SVG to be hidden when user access website with their phone and vice versa

user9824674
  • 232
  • 3
  • 13
  • Have a look at `media queries` https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – JanS Sep 03 '18 at 09:19

2 Answers2

2

A simple and elegant solution would be to apply bootstrap classes hidden-xs and visible-xs on the parent html element of the svg to be shown on pc and the svg to be shown on mobile respectively.

How it works:

  1. All the classes with -xs as the suffix apply their effects only when the viewport is below 480px.
  2. So in the case of hidden-xs, the element on which this class is applied will get hidden whenever the viewport resolution is below 480px. On higher resolutions, it will be shown by default.
  3. And in the case of visible-xs, the element on which this class is applied will only be shown when the viewport resolution is below 480px. On higher resolutions, it will be hidden by default.

Example:

<div class="visible-xs">
  <svg /> <-- This will be shown on mobile and hidden on desktop --!>
</div>
<div class="hidden-xs">
 <svg /> <-- This will be hidden on mobile and shown on desktop --!>
</div>

In Bootstrap 4, this can be achieved by using the classes of the following format:

  • .d-{value} for xs
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

  • none
  • inline
  • inline-block
  • block table
  • table-cell
  • table-row
  • flex
  • inline-flex
Anvay
  • 305
  • 1
  • 2
  • 11
  • hidden-*-up or hidden-*-down are not mentioned in the bootstrap 4 specs, the way to achieve this functionality through bootstrap 4 is to use the display classes having the format `d-{breakpoint}-{value}` – Anvay Sep 03 '18 at 10:03
  • you are right, i keep getting the alpha specs... removed the comment – Thomas Scheffer Sep 03 '18 at 10:05
  • @ThomasScheffer no issues.. I updated my answer to include bootstrap 4 classes also. – Anvay Sep 03 '18 at 10:10
1

check to see if its mobile, see this post

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

and 

var isMobile = false
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

if(isMobile) {
  svg1.style.visibility = "hidden"
  svg2.style.visibility = "visible"
} else {
  svg2.style.visibility = "hidden"
  svg1.style.visibility = "visible"
}
<svg id=svg1 width=200 height=200>
  <circle cx=70 cy=67 r=50 />
</svg>

<svg id=svg2 width=200 height=200>
  <circle cx=120 cy=100 r=50 />
</svg>

I believe its in your best interest to extract isMobile into a seperate function

andylamax
  • 1,305
  • 9
  • 28