Problem ze zmianą responsywności w kodzie html 
Autore: Mirosław KulikMam mały problem z zamianą kodu html po zapisaniu strony do dalszej edycji.
Wiadomo, że program nie posiada funkcji podglądu całej strony w html. Dlatego żeby go samodzielnie edytować, trzeba wyeksportować witrynę na dysk i zapomocą notatnika pogrzebać w kodzie. Chciałem w ten sposób zmienić kod dotyczący responsywności strony, ponieważ jest naprawdę niezadowalająca w stosunku do layoutu strony jaką tworzę. Strona jest dosyć duża, a widok na mniejszych rozdzielczościach jak np na laptopie, czyta już jako tablet czyli "widok 1" zamiast "Duży ekran". Niestety program nie posiada funkcji przesunięcią rozdzielczości, aby czytał "duży ekran" od 960 px. Nie mogę także zmienić rozmiaru całej strony, ponieważ mija się to z zamysłem strony.
A więc...
Nie tworząc (nie włączając nawet) responsywności strony w programie, tworzy się osobny kod w pliku templete na temat responsywności na poszczególne urządzenia - desktop/tablet/phone itp. Zmieniając go lub nawet zastępować innym -
@media screen and (max-width:700px)
{ main-content,
#sidebar {
float:none;
width:100%; }
}
@media screen and (max-width:430px)
{ nav li, nav a }
{ display: block; }
Niestety nic się nie zmienia, nadal jest taka sama sytuacja jak przed edycją. Oczywiście zmieniam także inne dane w sekcji <head> jak np.
<meta name="viewport" content="width=device-width>
Co mogę zrobić, aby strona zaczeła reagować na responsywność, którą sam umieszczam? Korzystam z najnowszej wersji programu (Website x5 12 Professional). Bardzo prosiłbym o pomoc.
Witaj Mirku
W ustawieniach responsywności dodajesz rozdzielczości
Nic nie trzeba "grzebać" w kodzie strony
Czyli:
1 - Ustawienia ogólne
2 - zakładka po prawej [projekt responsywny]
3 - dodaj
i wpisujesz co chcesz i ile chcesz
Oczywiście podałem przykłady rozdzielczości
i nie zapomnij później w projekcie na stronie/stronach
poustawiać co i jak ma się wyświetlać przy danej rozdzielczości
Ja dodam że:
Można sobie tworzyć (do 10 punktów) lub usuwać te punkty.
Mnie się ustawił automatycznie przedostatni punkt na 1060 px (szerokość nagłówka) i do końca jest w prawo szerokość w nieskończoność.
A w Pomocy pisze:
"Czasem najlepiej jest zbudować dwie jej wersje, jedną na duże ekrany, a drugą na urządzenia przenośne. W obu przypadkach wystarczające może się okazać skorzystanie z funkcji optymalizacji, którą oferuje WebSite X5, która to funkcja sprawdza właściwości przeglądarki i zmniejsza strony tak, że daje się je oglądać na urządzeniach przenośnych."
Nie zagłębiam się co to znaczy, ale można sprobować.
i w tym przypadku wracamy do "stereotypów"
Po to jest responsywność by się właśnie jedna strona (jeden adres strony) dostosowywała do rozdzielczości, a nie tworzyć znowu kilka wersji tej samej strony pod różne urządzenia i w dodatku pod różnymi adresami www
Autore
Opcja "Pomoc" w programie okaże sie chyba dobrym trafem, ponieważ stworzę przekierowanie na podstawie wykrytej rozdzielczości urządzenia. Dzięki Ryszard S. ;)
Darku doskonale zdaję sobie sprawę z opcji jakie wypisałeś. Nawet opisałem je w treści pytania ;) Wszystko byłoby ok, jeżeli rozdzielczość "Duży ekran" oraz "smartfon" byłyby edytowalne jak "Widok 1" czy "Widok 2". Tak, można je zmienić, ale zmiana ustawień w "Struktura wzorca głównego" mija się po prostu z celem, ponieważ strona musi posiadać 1600px a nie np 1024. Numerowanie strony responsywnej nie uwzględnia przecież menu głównego, a przy mniejszych rozdzielczościach zmienia położenie z poziomego do pionowego, a przy rozdzielczości 1024px za wszelką cenę chce tego uniknąć. Na mniejszej owszem, ale nie gdy przeglądamy stronę na laptopie ;) Tu jest problem..
A nie możesz po prostu zastosować w projekcie szerokość strony 1200px?
Chyba nie będzie problemem wizualnym jak na laptopie 1600px "zobaczysz"
skromnej szerokości paski po bokach strony
Wszystko opiera się o szerokość menu głównego
Czyli im więcej zakładek tym menu staje sie szersze,
co przekłada się na "szybsze" zmienianie się do menu
"mobilnego" przy mniejszych rozdzielczościach
Dla przykładu stworzyłem stronkę o szerokości 1900px
oraz pięć zakładek po 160px z 10px przerwy między przyciskami
Menu dopiero zmienia się w "mobilne" przy rozdzielczości poniżej 960px
Czy teraz "trafiłem" o co chodzi?
Autore
Faktycznie, po zmniejszeniu rozmiaru przycisków menu głównego, nie przechodzi już przy mniejszych rozdzielczościach na menu mobilne. Dzięki za pomoc! ;)
Jednak i tak z kuli wszystkich obiektów muszę zrobić przekierowanie na podstawie wykrytej rozdzielczości urządzenia.
Dzięki Wam jeszcze raz :)