Line-height w na PC i Mobil, jak ustawić?

0

Czy jest jakiś znacznik dla mobilnych przeglądarek, które te respektują :)

Problem jest taki, że cokolwiek nie zrobię to nie mogę uzyskać w miarę dużych odstępów na mobilnych przeglądarkach, chyba, że ustawię line-height: 3em ale wtedy na PC monstrualne odstępy.

Wiem że przeglądarka mobilna przejmuje stylowanie, próbowałem viewport ze stałą szerokością 1366 ze skalą i bez skali, z szerokością domyślną urządzenia.

IMO powinien być znacznik dla line-height (ale też dla wielkości czcionki), który uwzględnia przeglądarka mobilna.

Główny problem to praktycznie brak interlinii na mobilnych przeglądarkach (też większa czcionka by się przydała, ale to mniejszy problem).
Poszukuje prostego rozwiązania bez pliku css tylko w kodzie strony, strona to sam tekst i nie da się jej wygodnie czytać na mobilnych przeglądarkach bo linia na linii.
Jest możliwe proste rozwiązanie?

4

https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries - tego próbowałeś?

0

Dziękuję. To wygląda że jest do tego :) Ale to duża maszyna. Szkoda że nie podali prostego zastosowania. Ze składni wynika, że można jest robić style pod bardzo różne urządzenia i też z uwzględnieniem orientacji telefonu. pewnie strony typu onet czy wp to stosują.
Poszukam prostej implementacji (z typowymi czcionkami typu Georgia, Arial) gdzie media queries dzielą urządzenia na PC i inne.
Ciekawe czy jest implementacja gdzie można kod zawrzeć tylko w kodzie html, np. jako styl dla jednego dużego akapitu.

2
Jets napisał(a):

Ciekawe czy jest implementacja gdzie można kod zawrzeć tylko w kodzie html, np. jako styl dla jednego dużego akapitu.

Tak masz w jednym z podanych tam przykładów:

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>
0

Czy ten przykład oznacza, że nie wyświetla się pewna zawartość div na stronie gdy ta zawartość przekracza 600 px szerokości, czy oznacza że jeśli urządzenie ma szerokość 600 px to ten div sie nie wyświetla?
jednak przykładu na interlinie łącznie z plikiem css to jednak nie ma. A to chyba podstawowe zastosowanie media-queries, bo wyświetlanie treści na PC a na mobilnym urządzeniu to dwie jakości, a dokładnie bez media guery nie da się by było czytelnie i tu i tu.

2
Jets napisał(a):

Czy ten przykład oznacza, że nie wyświetla się pewna zawartość div na stronie gdy ta zawartość przekracza 600 px szerokości, czy oznacza że jeśli urządzenie ma szerokość 600 px to ten div sie nie wyświetla?

Tak. A jeśli chcesz użyć ich do zdefiniowania zależnych od rozdzielczości font-size i line-height, to o prostu je tam umieść zamiast display.

A swoją drogą, jaki masz ten viewport? Bo to powinno być coś w stylu:

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

i ogólnie twój problem jest dosyć dziwny i podejrzewam, że wynika właśnie błędnie zdefiniovanego viewportu i z faktu, że przeglądarka mobilna nie dysponując tą deklaracją powiększa sobie jakoś po swojemu stronę bez szacunku dla wartości zdefiniowanych w jej CSS-ie.

0

Sprawdziłem ten viewport i jest OK to o co pytałem! :)
Dziękuję :)
miałem:

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

I rożne wersje ale bez height bo myślałem że dostosowuje ekran do szerokości (telefonu). (a jak zrobię z height to będzie długa strona mocno pomniejszona i nic nie będzie widać). To jednak dziwne co oznacza width i height zwłaszcza gdy podać wartości liczbowe (a podawałem 1366 dla width).

Teraz jak są poprawnie odstępy to widzę że literki jednak za małe, będę musiał wprowadzić ten CSS. A strona robiona we Front Page i generalnie kazda jednostka (akapit czy tytuł, podtytuł) ma własne formatowanie. Na początek muszę znaleźć przykład z podstawowym CSS dla najprostszej strony.
Nie wiem tylko czy Front Page da możliwość, że zaznaczam tekst i wybieram zdefiniowaną class czy trzeba ręcznie do kodu za każdym razem?

3 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>

<style>
BODY {
  font-size:14px;
}

H1 {
  font-size:18px;
}

P {
}
</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
0

Dziękuję,

Jak się nie określa P { } to przyjmuje jak dla Body czcionkę?

Odnośnie viewport to dodam, że FF idealnie wyświetla:
<meta name="viewport" content="width=1366">

idealnie to znaczy że całą stronę na szerokość z zachowaniem względnych odstępów

natomiast Chrome i Opera robią swój styl czyli bez interlinii. Z height natomiast wszystkie wyświetlają interlinię, ale jest mankament - lewy górny róg okno otwarcia, natomiast skala chyba nie przyjmuje poniżej 1 bo wtedy przeglądarki przejmują styl i jest bez interlinii.
Mam nadzieję, ze jak będzie CSS i media queries to zaczną wyświetlać całą szerokość strony na ekranie otwarcia. (przypuszczam że jak widza brak media-quries to robia swój styl.)

jednak FF działa najlepiej, gdyby wszystkie tak działały to nie byłoby problemu względnych odstępów na android (na tym sprawdzam).

1
Jets napisał(a):

Jak się nie określa P { } to przyjmuje jak dla Body czcionkę?

Tak.

1 użytkowników online, w tym zalogowanych: 0, gości: 1