ცოტა ხნის წინ ჩემი მეგობარი დამიკავშირდა, რომ დახმარების სათხოვნელად გამოეყენებინა WordPress საიტი, რომელიც მან ააშენა X თემის გამოყენებით. მისმა კლიენტმა მას დილით დაურეკა მას შემდეგ, რაც მან შენიშნა, რომ მისი ვებსაიტი iPhone– ზე სწორად არ ჩანს. ნიკმა თავად შეამოწმა და დარწმუნებული იყო, რომ მის მიერ შექმნილი ლამაზი საპასუხო დიზაინი აღარ მუშაობდა.
მას კიდევ უფრო მისტიზდა ის ფაქტი, რომ როდესაც მან შეცვალა ბრაუზერის ფანჯარა სამუშაო მაგიდაზე, საიტზე იყო რეაგირებს, მაგრამ მის iPhone- ზე მხოლოდ დესკტოპის ვერსია გამოჩნდა. რატომ უნდა იყოს საიტი რეაგირებს დესკტოპის კომპიუტერზე და არ რეაგირებს მობილურ მოწყობილობაზე?
რატომ არ მუშაობს საპასუხო დიზაინი
საპასუხო დიზაინი წყვეტს მუშაობას, როდესაც HTML ფაილის სათაურს არ აქვს კოდის ერთი ხაზი. თუ კოდის ეს ერთი ხაზი არ არის, თქვენი iPhone, Android და სხვა მობილური მოწყობილობები ჩათვლიან, რომ ვებსაიტი, რომელსაც ათვალიერებთ, არის სრულმასშტაბიანი დესკტოპის საიტი და შეცვლის ხედვის პორტი მოიცავს მთელ ეკრანს.
რას გულისხმობთ Viewport და Viewport ზომით?
ყველა მოწყობილობაზე ხედის ზომა გულისხმობს ვებგვერდის იმ ზონის ზომას, რომელიც ამჟამად მომხმარებლისთვის ჩანს. წარმოიდგინეთ, რომ თქვენ გაქვთ iPhone 5, რომლის სიგანე 320 პიქსელია. თუ მკაფიოდ არ არის ნათქვამი სხვაგვარად, iPhone– ები თვლიან, რომ ყველა ვებსაიტი, რომელსაც სტუმრობთ, არის სამუშაო საიტის, რომლის სიგანეა 980px.
ახლა თქვენი წარმოსახვითი iPhone 5-ის გამოყენებით,თქვენ ეწვიეთ ვებსაიტს, რომელიც შექმნილია დესკტოპისთვის, რომლის სიგანეა 800 პიქსელი. მას არ აქვს საპასუხო განლაგება, ამიტომ თქვენს iPhone- ში ნაჩვენებია სრული სიგანის დესკტოპის ვერსია.
შეცვალეთ გატეხილი iphone 6 ეკრანი
IPhone 5-ის სიგანე მხოლოდ 320 პიქსელია. ეს ყოველთვის არ არის ხედვის ზომის ზომა?
არა, ეს არ არის. ხედის ზომით, სკალირების ჩართვა შეიძლება . IPhone უნდა დააშოროთ, რომ ნახოთ ვებგვერდის სრული სიგანის ვერსია. გახსოვდეთ, რომ ხედი ეხება გვერდის იმ არეალს, რომელიც ამჟამად მომხმარებლისთვის ჩანს. IPhone- ის მომხმარებელი ამჟამად ხედავს გვერდის მხოლოდ 320 პიქსელს, ან ხედავს სრულ სიგანეს?
ეს მართალია: ისინი ხედავენ თავიანთ ეკრანზე მთელ სიგანეს ვებგვერდს, რადგან iPhone– მა ჩათვალა, რომ ის ნაგულისხმევი ქცევაა: იგი მასშტაბირებულია ისე, რომ მომხმარებელს შეეძლოს 980 პიქსელის სიგანეზე ნახვა. ამიტომ, iPhone- ის ხედვის პორტი 980 პიქსელია.
მასშტაბის შემცირების ან შემცირებისას, ხედვის პორტის ზომა იცვლება. მანამდე ვთქვით, რომ ჩვენი წარმოსახვითი ვებსაიტის სიგანე 800 პიქსელია, ასე რომ, თუ თქვენს iPhone- ს მასშტაბირება მოგიწევთ ისე, რომ ვებსაიტის კიდეები ეხებოდეს თქვენი iPhone– ის ეკრანის კიდეებს, ხედვის პორტი 800px იქნებოდა. IPhone შეიძლება ნახატის პორტი აქვს 320px დესკტოპის საიტზე, მაგრამ თუ ეს მოხდა, თქვენ მხოლოდ მცირე ნაწილს ნახავდით მას.
iphone ჰორიზონტალური ხაზები ეკრანზე
ჩემი მგრძნობიარე ვებსაიტი გაფუჭებულია. როგორ გამოვასწორო?
პასუხი არის HTML ერთი სტრიქონი, რომელიც ვებსაიტის სათაურში ჩასმისას აპარატს ეუბნება, რომ დაადგინოს ხედვის საკუთარი სიგანე (iPhone 5 – ის შემთხვევაში 320 პიქსელი) და არ გაანაწილოს (ან გაადიდოს) გვერდი.
ამ მეტა-თეგთან დაკავშირებული ყველა ვარიანტის უფრო ტექნიკური განხილვისთვის გაეცანით ეს სტატია tutsplus.com– ზე .
როგორ დავაფიქსიროთ WordPress X თემა, როდესაც ის არ რეაგირებს
დავუბრუნდი ჩემს მეგობარს ადრე: კოდის ეს ერთი ხაზი გაქრა, როდესაც მან X თემა განაახლა. თქვენი გამოსწორებისას გაითვალისწინეთ, რომ X თემა არ იყენებს მხოლოდ ერთ სათაურის ფაილს - ის იყენებს სხვადასხვა სათაურის ფაილებს ყველა დასტისთვის, ასე რომ თქვენ მოგიწევთ თქვენი რედაქტირება.
ჩემი iphone 6 ეკრანი შავია
მას შემდეგ, რაც ნიკი იყენებს X თემათა Ethos სტეკს, მას მოუწია კოდის ხაზის დამატება, რომელიც მანამდე ვახსენე სათაურის ფაილს, რომელიც მდებარეობდა x- ში /frameworks/views/ethos/wp-header.php . თუ სხვა სტეკს იყენებთ, შეცვალეთ თქვენი სტეკის სახელი (მთლიანობა, განახლება და ა.შ.) 'ეთოსთვის', რომ იპოვოთ სათაურის სწორი ფაილი. ჩასვით ეს ერთი ხაზი და ხმა! კარგი ხარ წასასვლელად.
ასე რომ, ეს აფიქსირებს ჩემს CSS მედია მოთხოვნებს, ძალიან?
როდესაც ამ სტრიქონს ჩასვამთ თქვენი HTML ფაილის სათაურში, თქვენი საპასუხო @ media მოთხოვნები მოულოდნელად დაიწყებს მუშაობას და თქვენი ვებსაიტის მობილური ვერსია გაცოცხლდება. მადლობა კითხვისთვის და ვიმედოვნებ, რომ დაგეხმარებათ!
გახსოვდეთ Payette Forward,
დავით პ.