17 berichten aan het bekijken - 1 tot 17 (van in totaal 17)
  • Q:
    Bijdrager
    computer space

    Breedte internetpagina regelen iOS

    Als je een mobiele website ontwerpt kun je op Windows Phone heel makkelijk de breedte fixeren met:

     
    @-ms-viewport
    {
    	width: 800px;
    }
     

    Door dit in de CSS te stoppen rendert de pagina alsof ie 800 pixels breed is, en wordt dan gedownsampled naar zeg de 480 pixels van de telefoon.

    Hoe doe ik ditzelfde voor iPhone, iPad en Android?

    Bijdrager
    Ruud Ravenhorst

    Je moet geen mobiele website ontwerpen, maar een responsive website. Waarmee je (bijna) alle mobieltjes/tablet gebruikers en PC/Mac/Linux gebruikers een plezier doet met 1 data-set.

    Bijdrager
    Shmoo

    Er bestaat iets als dit in je CSS.

    @-webkit-viewport { width:device-width; }
    @-moz-viewport { width:device-width; }
    @-ms-viewport { width:device-width; }
    @-o-viewport { width:device-width; }
    @viewport { width:device-width; }
    

    Maar dat is 100% hetzelfde als dit in je HTML en daarmee doe je in één tag precies hetzelfde voor alle browsers als bovenstaande code met 5 of 6 regels.

    <meta name=”viewport” content=”width=device-width”>

    Die bovenste (CSS) versie is ooit ontworpen omdat mensen vinden dat je layout gerelateerde aanpassingen in je stylesheet doet en niet in je HTML tags.
    Beetje te vergelijken met inline CSS in je HTML tags en externe CSS en als je er eens over nadenkt hebben ze wel ergens een punt, al je Media Queries gedoe plaats je ook gewoon in je styleheets.

    Bijdrager
    Shmoo

    En nog iets,

    Er bestaat één bepaalde type Nokia Lumia telefoon met Windows Phone (software) erop die niet reageert op de HTML meta viewport tag en voor deze telefoon zou je dus iets kunnen doen als:

    @-ms-viewport
    {
        width: 320px;
    }
    

    Alleen heb je dan het nadeel dat daarna alle telefoons met Windows Phone (software) erop reageren op die viewport tag in je CSS.
    Dus dat schiet ook niet heel erg op, gelukkig was dat een van de eerste Windows Phone toestellen en is deze niet heel erg veel verkocht in Europa helemaal niet volgens mij.

    Bijdrager
    Wyodor

    Hier mijn, aangepaste, versie van een mobiel geval :

    http://responsive.2kool4u.net/

    Bijdrager
    computer space
    Ruud op 19 januari 2014

    Je moet geen mobiele website ontwerpen, maar een responsive website. Waarmee je (bijna) alle mobieltjes/tablet gebruikers en PC/Mac/Linux gebruikers een plezier doet met 1 data-set.

    Precies dat ben ik aan het doen, maar dan is het wel handig eea te finetunen.

    Bedankt, de meta tag werkt uitstekend.

    Nog een probleem: op webkit worden invoervakken veel te groot gerenderd. Alsof die niet meeschalen.

    Bijdrager
    Shmoo

    Dit even toevoegen aan je CSS en je zorgt er voor dat mobiele producten niet meer auto. je font-size gaan lopen aanpassen.

    html {
    	-ms-text-size-adjust: 100%;
    	-webkit-text-size-adjust: 100%;
    }
    
    Bijdrager
    computer space

    Helemaal top shmoo! Dat lost de problemen op.

    Bijdrager
    computer space

    Ik zie dat je m ook op “none” kunt zetten. Maakt dat nog uit 100% of none?

    Bijdrager
    Shmoo

    Normaal gezien maakt dat niets uit 100% of none zijn beide neutraal dit reageert namelijk op de default body font-size die standaard 16px (100%) is.

    Dit is eigenlijk zo’n typische frustratie-tag geworden die je vroeger had met verschillende IE versies, waardoor je altijd dit als eerste moest doen in je stylesheets om te zorgen dat alle HTML tags geen auto. margin en paddings hadden.

    * { margin: 0; padding 0; }

    Bijdrager
    computer space

    De meta-tag werkt goed voor iPad/iPhone, maar niet voor Windows Phone
    De css tag werkt goed voor Windows Phone (gebruik dus beide)
    De text-size adjust zorgt ervoor dat er geen rare schaalsprongen meer in te tekst zitten
    * margin:0, padding 0 haalde er inderdaad nog wat rare onverklaarbare white-space uit.
    Rest nog een probleem: waarom zijn de invoervakken op iOS zo groot?
    Als ik de positie kan aanpassen voor webkit-only is dat ook goed.

    Nog iets geks:
    Deze html:

    <?php echo(‘<input type=”radio” ‘.$radiodefault60.’id=”y1960″ name=”year” value=”1960″>’); ?>
    <label for=”y1960″><span></span>1960-1979</label>
    </span><span class=”y1980″>

    Een van een serie CSS-gestylde radio-buttons, rendert heel gek in iOS. De Label-tag wordt als < a > tag behandelt, en er op klikken geeft een error “Deze URL bestaat niet”, i.p.v. dat de radiobutton actief wordt.

    Raar dat met code tags bovenstaande code onleesbaar wordt.

    Bijdrager
    Wyodor

    Een van een serie CSS-gestylde radio-buttons, rendert heel gek in iOS. De Label-tag wordt als < a > tag behandelt, en er op klikken geeft een error “Deze URL bestaat niet”, i.p.v. dat de radiobutton actief wordt.

    Kijk eens op deze pagina :

    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

    Meer hier :

    http://www.google.nl/search?q=ios+webpage+format-detection

    Bijdrager
    computer space

    Ik zie daar niet waarom “label” afwijkend wordt behandeld.

    Bijdrager
    Shmoo

    @computer_space,

    Radio’s en checkboxen ( input ) fields zijn twee dingen die je standaard niet kunt stijlen omdat deze altijd wel iets van een native stijl behouden wat je dan wilt doen is ze vervangen door andere elementen.

    Er staan online een x aantal manieren om dat te doen, persoonlijk vind ik werken met een icon-font nog het beste aangezien je die toch al heel veek in je projecten gebruikt.

    Het pijltje is mijn checkbox als het waren alleen heeft mijn icon-font (nog) geen echt checkbox of radio icoontje vandaar dat ik tijdelijk een pijltje gebruik als vervanger.

    Hoe het werkt is enorm simpel.

    HTML

    Zie je dat ik de input tag wrap tussen de label + span (met tekst) tag, dit zorgt er voor dat je label + tekst direct een button wordt en mensen niet hoeven te focussen op het meestal kleinere checkbox element.

    /* voeg je @font-face icon-font toe aan je CSS - dat is niet al te spannend en moeilijk */
    
    input[type="checkbox"],
    input[type="radio"] { display: none; }  /* verbergen van de standaard elementen */
    
    input[type="radio"] + span:before,
    input[type="checkbox"] + span:before {
    	padding-right: 0.333em;
    	outline: none;
    	font-size: 150%;
    	font-family: "foundation-icons"; /* het icon-font toekennen */
    	-webkit-appearance: none;
    }
    input[type="radio"] + span:before { content: "\f10c"; }
    input[type="radio"]:checked + span:before { content: "\f109"; }
    
    input[type="checkbox"] + span:before { content: "\f10a"; }
    input[type="checkbox"]:checked + span:before { content: "\f10b"; }
    

    Let wel op, stel je hebt geen radio of checkbox tekst bij het element dan ben je nog steeds verplicht om een lege span tag na je input tag te plaatsen.

    <span></span>
    
    Bijdrager
    Shmoo

    Btw het schalen-/zoomen regelt het device zelf aan de hand van de resolutie van het scherm btw Retina X2 – of andere waardes hebben allemaal eigen zoom-factoren nodig om te zorgen dat content op je display past.

    De meta tag compleet maken lost dit op, ik gebruik dit meestal.

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

    En dit vind ik wel een mooie link met uitleg.
    http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

    Bijdrager
    computer space

    Het stylen van de Radio/Checkbutton is geen probleem, ik doe dat met een background-image die verschuift.
    Probleem zijn de rechthoekige tekstvakken voor invoeren van tekst. Die worden veel groter in webkit dan in de andere browsers (waar ie gewoon height en width volgt).

    Bijdrager
    Shmoo

    Geen idee, miss. /wordt dit overgeheveld van de standaard input of input[=”text”] field tags.

17 berichten aan het bekijken - 1 tot 17 (van in totaal 17)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.