Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS] Strona mobilna i na PC

Napisany przez: david8213 11.04.2019, 08:01:07

Zrobiłem stronę ze stylami osobno dla smartfona i osobno dla PC
Dlaczego nie przełącza mi stylu na smartfonie tylko używa stylu dla PC ?

[XML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld" /> 
<link href="pc.css" rel="stylesheet" type="text/css"  media="screen" />
....
[XML] pobierz, plaintext

Napisany przez: trueblue 11.04.2019, 08:03:04

Powinieneś uzależniać od szerokości/wysokości ekranowej, a nie typu media. Handheld, to nie telefon i tablet.

Napisany przez: david8213 11.04.2019, 09:22:54

Cytat

Powinieneś uzależniać od szerokości/wysokości ekranowej, a nie typu media. Handheld, to nie telefon i tablet.

Handheld to jest urządzenie mobilne więc i tablet i telefon

Zrobiłem jak ponizej ale nie działa

[XML] pobierz, plaintext 
<html>
<link media="only screen and (min-device-width: 900px)" href="pc.css" type="text/css" rel="stylesheet">
<link media="screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet">
</html>
[XML] pobierz, plaintext

Tak też nie działa

[XML] pobierz, plaintext 
<style>
 @media all and (max-width: 900px) { background-image: url("logo_mobile.png"); } 
 @media all and (min-width: 920px) { background-image: url("logo_pc.png"); } 
</style>
[XML] pobierz, plaintext

Komórki mają rozdzielczości tj. komputery PC fullHD więc jak to zrobić ?

Napisany przez: vokiel 11.04.2019, 20:58:39

Ustaw inne przedziały. Zobacz przykłady https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 albo https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Napisany przez: trueblue 11.04.2019, 21:12:02

Cytat(david8213 @ 11.04.2019, 10:22:54 )

Handheld to jest urządzenie mobilne więc i tablet i telefon

Sprzed dwudziestu lat, na dwie płaskie baterie.