CSS og media

[Bertel Lund Hansen]

Er der ikke mere noget der hedder "@media handheld"?

På W#'s skolesider finder jeg kun "print" og så nogle (nærmest)
programmeringsmuligheder.

--
/Bertel

[Kim Ludvigsen]

Den 29/08/2019 kl. 21.28 skrev Bertel Lund Hansen:
> Er der ikke mere noget der hedder "@media handheld"?

Godt spørgsmål. Jeg ved det ikke.

> På W#'s skolesider finder jeg kun "print" og så nogle (nærmest)
> programmeringsmuligheder.

Jeg kan forestille mig, at det er udgået, fordi det ikke længere giver
mening. I gamle dage var der computere med store skærme og håndholdte
med små skærme, men med fremkomsten af tavlecomputere og store
mobiltelefoner er grænserne blevet udvisket.

Brug i stedet @medie, fx:
@media only screen and (min-width:601px) and (max-width:1000px)
og
@media only screen and (max-width:600px)

En anden metode, som dog vist endnu ikke er sikker at bruge, fordi ikke
alle browsere understøtter den:
@media (pointer: fine) og @media (pointer: coarse)
Den bruger jeg fx til at placere en tekst på billeder, så
computerbrugere får vist teksten: "Klik for at se billedet i stor
størrelse", mens brugere med en trykfølsom skærm får vist "Tryk for at ...".

--
Mvh. Kim Ludvigsen

[Jan Hansen]

Bertel Lund Hansen skrev:

> Er der ikke mere noget der hedder "@media handheld"?
>
> På W#'s skolesider finder jeg kun "print" og så nogle (nærmest)
> programmeringsmuligheder.

Det jeg lige kan finde om handheld er:

@media handheld refers only to those ancient tiny proto-html cellphones from years past
neither iPhone or Android browsers supports CSS @media handheld.

Min Nokia N8 (med 360x640 px) forstår
@media only screen and (max-width:600px) { body {background-color:#FF8888;} }
@media only screen and (min-width:601px) { body {background-color:#88FF88;} }

og skifter farve, når jeg drejer den.
Min sidste Nokia 5800 døde, da jeg tabte den i en spand vand, så jeg kan ikke
prøve der.
Men det er selvfølgelig et spørgsmål om, hvor bagudkompatibel, siden skal være...


--
mvh Jan.
Help Microsoft stamp out piracy. Give
Linux to a friend today!

[Bertel Lund Hansen]

Jan Hansen skrev:

> Min Nokia N8 (med 360x640 px) forstår
> @media only screen and (max-width:600px) { body {background-color:#FF8888;} }
> @media only screen and (min-width:601px) { body {background-color:#88FF88;} }

En stribe eksperimenter viste at min Galaxy S7 med Firefox også
forstår det - men dens opløsning svarer til min computerskærm, så
jeg kan ikke skelne.

> Min sidste Nokia 5800 døde, da jeg tabte den i en spand vand,
> så jeg kan ikke prøve der.

Min far har en ældre Galaxy der fungerer udmærket - blot uden
lyd. Den røg i lokummet fra hans brystlomme da han bøjede sig
ned.

> Men det er selvfølgelig et spørgsmål om, hvor bagudkompatibel,
> siden skal være...

Jeg har en popopside med lidt forklaring hvor linjeafstanden ved
<p> er for lille, mens den er fin på min monitor. Det er der så
desværre ikke noget at gøre ved. Og jeg kan heller ikke bruge
Kims fidus med klik/tryk som ellers er smart.

--
/Bertel

[Kim Ludvigsen]

Den 30/08/2019 kl. 13.07 skrev Bertel Lund Hansen:

> En stribe eksperimenter viste at min Galaxy S7 med Firefox også
> forstår det - men dens opløsning svarer til min computerskærm, så
> jeg kan ikke skelne.

Du kan ikke helt regne med, hvad skærmopløsningen er på mobilen kontra
skærmopløsningen på computeren. Har du nedenstående i din header?
<meta name='viewport' content='width=device-width, initial-scale=1.0,
user-scalable=yes'>

--
Mvh. Kim Ludvigsen

[Kim Ludvigsen]

Den 30/08/2019 kl. 13.07 skrev Bertel Lund Hansen:

> Jeg har en popopside med lidt forklaring hvor linjeafstanden ved
> <p> er for lille, mens den er fin på min monitor. Det er der så
> desværre ikke noget at gøre ved.

Har du en side, vi kan se?

> Kims fidus med klik/tryk som ellers er smart.

Du har sikkert regnet det ud, men hvis andre læser med, må jeg nok
hellere lige skrive, hvad jeg glemte i første omgang:

@media (pointer: fine) og @media (pointer: coarse) skal blot parres med
::before eller ::after i CSS-filen så teksten indsættes via CSS-filen.
Altså fx:

@media (pointer: coarse) {.kliktryk::before { content: "Tryk for at se
en stor udgave";}}
@media (pointer: fine) {.kliktryk::before {content: "Klik for at se en
stor udgave";}}

--
Mvh. Kim Ludvigsen

[Jan Hansen]

Bertel Lund Hansen skrev:

> Jeg har en popopside med lidt forklaring hvor linjeafstanden ved
> <p> er for lille, mens den er fin på min monitor. Det er der så
> desværre ikke noget at gøre ved. Og jeg kan heller ikke bruge
> Kims fidus med klik/tryk som ellers er smart.

Hvis ikke det virker, mangler du så ikke linien med

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

På siden http://www.sniper-pistol.com/linie.html skifter liniehøjde
og farve når jeg drejer telefonen. Det virker både på Huawei og Nokia.
Hvis den linie mangler, er Nokia konstant rød, og Huawei konstant grøn.

[Jan Hansen]

Kim Ludvigsen skrev:

Nå, den med viewport havde du også skrevet om...
Det havde jeg ikke nået at se, inden jeg trykkede på Send.

[Bertel Lund Hansen]

Kim Ludvigsen skrev:

> Har du en side, vi kan se?

Desværre. Det er en side med familiebilleder.

> @media (pointer: coarse) {.kliktryk::before { content: "Tryk for at se
> en stor udgave";}}
> @media (pointer: fine) {.kliktryk::before {content: "Klik for at se en
> stor udgave";}}

Tak, det prøver jeg.

--
/Bertel

[Bertel Lund Hansen]

Kim Ludvigsen skrev:

> Du kan ikke helt regne med, hvad skærmopløsningen er på mobilen kontra
> skærmopløsningen på computeren. Har du nedenstående i din header?
> <meta name='viewport' content='width=device-width, initial-scale=1.0,
> user-scalable=yes'>

Nej - ikke endnu ...

--
/Bertel

[Bertel Lund Hansen]

Kim Ludvigsen skrev:

> skærmopløsningen på computeren. Har du nedenstående i din header?
> <meta name='viewport' content='width=device-width, initial-scale=1.0,
> user-scalable=yes'>

Jeg skal love for at det gjorde en forskel. Nu står det hele
pludselig læseligt på mobilen, hvor det før var mikroskrift og
bittesmå frimærker.

--
/Bertel

[Dennis Munding]

Jeg ved, at for inkludering af stylesheets - <link rel... media="" /> -
der er media="handheld" udgået (deprecated):
https://www.w3schools.com/tags/att_link_media.asp


Så mon ikke det også gør sig gældende for @media...?


--
Med venlig hilsen

Dennis Munding

[Bertel Lund Hansen]

Dennis Munding skrev:

> Jeg ved, at for inkludering af stylesheets - <link rel... media="" /> -
> der er media="handheld" udgået (deprecated):

Okay. Tak.

--
/Bertel