Vraag Meta viewport-tag lijkt volledig te worden genegeerd of heeft geen effect


Ik heb deze tag in de kop van een webpagina:

<meta name="viewport" content="width=device-width,initial-scale=0.47,maximum-scale=1">

Om de een of andere reden lijkt het gewoon te worden genegeerd op mijn iPhone, zelfs toe te voegen user-scalable=no heeft geen effect. Ik heb veel waarden van breedte, initiële schaal enz. Geprobeerd ... niets lijkt enig effect te hebben.

Weet iemand wat dit zou kunnen veroorzaken? Ik kan aan de bron duidelijk zien dat het daar in de kop is.

Mijn iPhone staat op iOS7.

Bewerk: Het probleem is nog steeds aan de gang op iOS6 met de xcode ios-simulator, dus ik denk niet dat dit te wijten is aan iOS7.


10
2017-09-27 11:06


oorsprong


antwoorden:


Het werkt! Op je pagina gebruik je:

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

Wanneer ik de pagina op mijn telefoon open (ios7 iphone5) zie ik precies het juiste resultaat.

Weet je 100% zeker dat je echt hebt geprobeerd het volgende in je code te zetten?

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

Het wordt niet genegeerd.

Update1

Ik heb net gezien dat in je code het lijkt alsof je mijn tweede viewport gebruikt, maar ik word waarschijnlijk door javascript in de 640 px-viewport veranderd. Dat is misschien de reden waarom het voor jou voelt alsof het genegeerd wordt. Omdat tijdens runtime de viewport wordt gewijzigd ...

Update2

Oké, ik heb het probleem gevonden.

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
} 

Uw pagina roept deze functie op die uw viewport opheft. Wist je van die functie?


26
2017-10-06 13:18



De breedte van Viewport verschilt op meerdere apparaten. iOS heeft 320 en Android heeft 360 in portretmodus. Landschapsmodus - afhankelijk van welk apparaat u heeft, krijgt u een andere verschillende breedte.

De beste manier om de website geoptimaliseerd voor mobiel te maken, is width = device-width. Als u initial-scale = 1.0 niet instelt, zal iOs inzoomen op het (vergrote) scherm wanneer de apparaatrotatie wordt gewijzigd.

Deze meta is alles wat je nodig hebt.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

En als u de zoomfunctie wilt uitschakelen, stelt u gebruikersscalable = nee in

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

Gebruik geen eigenschappen voor de codebreedte omdat deze dezelfde breedte zal instellen voor portret- en landschapsmodi, wat een zeer onaangename gebruikerservaring is.

Beste gedocumenteerd: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Over iOs 7 Bovendien zou ik zeggen - maak je geen zorgen over iOS7 vanaf nu. Het heeft zoveel bugs. Lees hier: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/


5
2017-09-29 17:00



Ik weet dat dit nu een oude vraag is, maar het was het eerste resultaat in Google toen ik dit probleem had, dus ik dacht dat ik het zou updaten met betrekking tot iOS 10.

Het lijkt erop dat Apple de volledige nu negeert user-scalable=no in iOS 10 om de toegankelijkheid te verbeteren

Zie: Twitter-bericht van Thomas Fuchs


5
2017-10-22 22:36



U moet als tijdelijke oplossing de volgende code proberen:

html { 
    zoom: .8; 
}

3
2017-10-29 16:01



Het lijkt erop dat ios7 de metatag niet correct herkent. Hier zijn de links die je kunnen helpen.

webapp niet correct schalen in iOS 7

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review


2
2017-09-29 18:30



Je moet je nog geen zorgen maken over IOS 7, het heeft zoveel bugs: http://www.infoworld.com/t/html5/bad-news-ios-7s-html5-full-of-bugs-227685

Misschien is je code helemaal in orde, maar probleem met iOS?


1
2017-10-02 21:00



Gebruik onderstaande code.

<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes">

Het werkt goed in veel van mijn projecten.


0
2017-09-29 14:27