iPhone compatibility issues (HTML)

Navigation
1

On the web I've made, I've had problems with iPhones. With all the other devices it works correctly, both Android, Windows even with MacOS, with different browsers. But if I use Safari on iOS I have several problems, such as when watching a video: 

<video autoplay loop muted>
    <source src="../res/videos/video.mov">
</video>

With this code in all the browsers that open the web page the video is autoreproduced, instead the video with the play button comes out and if you give it the video opens, so to speak in a separate tab.

I also have a button to upload up that in all browsers is such that:

But when you open it with an iPhone it looks bad, where the arrow inside is not centered:

The button code: 

<button id="upbutton" class="hidden"><i class="glyphicon glyphicon-chevron-up"></i></button>

#upbutton{
    color:#FFFFFF;
    position:fixed;
    border-width:3px;
    border-color:#FFFFFF;
    border-radius:50%;
    background-color:#337de6;
    opacity:0.6;
    bottom:90px;
    right:30px;
    width:60px;
    height:60px;
    font-size:30px;
    z-index:100;
}
    
asked by Pavlo B. 02.12.2016 в 18:23
source

2 answers

1

The video problem is well known and has already been commented on in other questions. In short: generally in mobile browsers videos are not auto-reproduced to avoid unwanted use of data.

About how the bad image looks on iPhone and iOS, I have been able to reproduce the problem. I think it's due to how Safari treats the source and the glyphicons : since you have not set any particular style to it, each browser will interpret it as defined by default.

What you could do is make sure that the arrow will be placed in the center, positioning it absolutely inside the blue circle. Something like this (it works on iOS): 

#upbutton{
    color:#FFFFFF;
    position:fixed;
    border-width:3px;
    border-color:#FFFFFF;
    border-radius:50%;
    background-color:#337de6;
    opacity:0.6;
    bottom:90px;
    right:30px;
    width:60px;
    height:60px;
    font-size:30px;
    z-index:100;
}

#upbutton i {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<button id="upbutton"><i class="glyphicon glyphicon-chevron-up"></i></button>
    
answered by 02.12.2016 в 18:38
1

If they use iOS 10, the videos can already be played automatically but with some restrictions ...

  • The <video> element will respect the autoplay attribute, as long as the following conditions are met:
    • If they do not contain audio tracks.
    • <video muted> will be played without user gesture too.
    • More information here
answered by 02.12.2016 в 19:17
Get the currency defined in Android Change the color of a day in the Winforms Calendar control