მივესალმოთ, შემთხვევით სტუმრებს და ბლოგის საიტის რეგულარულ მკითხველებს!

რამდენიმე ხნის წინ მე განვაახლე ჩემი ბლოგი ნულიდან მთლიანად wordpress თემის შექმნით. მე დავწერე იმის შესახებ, თუ როგორ მოხდა ეს სტატიაში "". ახალი შაბლონის შექმნისას ერთ-ერთი მთავარი ამოცანაა საიტის ადაპტირებული განლაგება ეკრანის ყველა რეზოლუციისთვის.

სტატიის მოკლე მონახაზი:

წინა სტატიაში მე უკვე დავწერე იმის შესახებ, თუ რატომ არის საჭირო. მაგრამ როგორ მივაღწიოთ ამ ადაპტირებას?

ამისათვის არსებობს სხვადასხვა გზები. ზოგი იყენებს ჯავასკრიპტს, ზოგი სხვას. მაგრამ მე მჯერა, რომ უმარტივესი და სწორი გზაარის ადაპტაციური CSS-ის გამოყენებით.

როგორ შევქმნათ ვებსაიტის საპასუხო განლაგება

ჯერ ერთი, თუ თქვენ აპირებთ შექმნათ საპასუხო ვებსაიტის დიზაინი, ტეგებს შორის ჩასვით შემდეგი კოდი:

რა სულელი ვიყავი, რომ ეს მაშინვე არ გავაკეთე, როდესაც ვებსაიტის ადაპტირებული განლაგების გაკეთებას ვცდილობდი!!!
პრობლემა მობილური ბრაუზერებისაიტის განლაგების მათ სკალირებაში, თუნდაც ადაპტირებული.

წარმოიდგინეთ, მე ვხატავ დიზაინს, შემდეგ ვწერ ყველა საჭირო სტილს და მოთხოვნას, ვამოწმებ საიტის ადაპტირებას სხვადასხვა რეზოლუციებზე. როგორც ჩანს, ყველაფერი კარგადაა! მაგრამ როდესაც ჩემს ბლოგს ვხსნი ჩემს სმარტფონზე, ვხედავ, რომ საიტი უბრალოდ შემცირდა. ის არ მოერგებოდა მობილურ მოწყობილობას, არამედ უბრალოდ შეამცირა შრიფტის ზომა, სურათები და ა.შ.

როგორ ასე? დავიწყე ყველა სტილის ორმაგი შემოწმება, რათა გამეგო, სწორად დავწერე თუ არა კლასები და საბოლოოდ მივედი იქამდე, რომ შევამოწმე ბრაუზერის ფანჯრის სიგანე px-ში Javascript-ის გამოყენებით. შოკში ვიყავი. ლეპტოპზე შემოწმებისას მივიღე შედეგი 1024 პიქსელი და დაახლოებით იგივე შედეგი მივიღე სმარტფონზე საიტის გახსნისას!

მაგრამ ეს არ შეიძლება იყოს!

თურმე, თუ არ დაწერთ კოდს, რომელიც ზემოთ აღვნიშნე, მობილური ბრაუზერი ვერ ხვდება, რომ საიტი რეაგირებსდა უბრალოდ ცდილობს ვებგვერდის გვერდის დაპატარავებას ისე, რომ მოთავსდეს პატარა მობილური ტელეფონის ეკრანზე.

ჩემი სისულელის და არაკომპეტენტურობის გამო ბევრი დრო დავკარგე. მაგრამ ახლა სამუდამოდ მახსოვს))).

ადაპტური განლაგება CSS მედია მოთხოვნები

იმისათვის, რომ ის საპასუხო იყოს CSS-ის გამოყენებით, თქვენ უნდა გამოიყენოთ მედია მოთხოვნები.

როგორ არის ეს? დიახ, ძალიან მარტივი. CSS ფაილში თქვენ უნდა დაწეროთ მოთხოვნები, როგორიცაა:

@media ეკრანი და (მინ-სიგანე: 1440 პიქსელი) და (მაქს. სიგანე: 1599 პიქსელი)( )

ეს კოდი ნიშნავს, რომ "( )"-ს შორის ჩასმული სტილები იმუშავებს ეკრანებისთვის, რომელთა მინიმალური სიგანეა 1440 პიქსელი და მაქსიმალური სიგანე 1599 პიქსელი.

ანუ საიტის ელემენტების ის სტილები, რომლებიც უნდა იყოს ადაპტირებული ეკრანის გარჩევადობიდან გამომდინარე, ცალკე უნდა დაიწეროს თითოეული შესაძლო ეკრანის სიგანეზე.

ეკრანის ყველაზე მნიშვნელოვანი გარჩევადობა ადაპტური განლაგებისთვის

• 320 პიქსელი- მობილური მოწყობილობები (პორტრეტის ორიენტაცია);
• 480 პიქსელი- მობილური მოწყობილობები (ლანდშაფტის ორიენტაცია);
• 600 პიქსელი- პატარა ტაბლეტები;
• 768 პიქსელი- ტაბლეტები (პორტრეტის ორიენტაცია);
• 1024 პიქსელი- ტაბლეტები (ლანდშაფტური ორიენტაცია)/ნეტბუქები;
• 1280 px ან მეტი- კომპიუტერი.

სწორედ ამ რეზოლუციებზე უნდა გაამახვილოთ ყურადღება და განსაკუთრებული ყურადღება მიაქციოთ ადაპტური განლაგების შექმნისას. ეს არის ეკრანის გარჩევადობის ყველაზე გავრცელებული ტიპები.

bootstrap საპასუხო დიზაინი

ძალიან მოსახერხებელია bootstrap-ის გამოყენება ადაპტური განლაგების შესაქმნელად. მოხერხებულობა ის არის, რომ ყველა სტილი ბლოკების, ღილაკების, ცხრილების და ა.შ. უკვე რეგისტრირებულია bootstpap-ში. თქვენ უბრალოდ უნდა გაარკვიოთ, რომელი კლასი რომელ ელემენტს მივანიჭოთ.

დასაწყებად, ჩამოტვირთეთ bootstrap-ის უახლესი ვერსია და დააკავშირეთ იგი თქვენს საიტზე. გთხოვთ გაითვალისწინოთ, რომ სტილებისა და სკრიპტების WordPress-თან დაკავშირებას თავისი მახასიათებლები აქვს.

Bootstrap-ის განლაგება განსხვავებულია იმით, რომ ბლოკის ან ეკრანის სიგანე დაყოფილია 12 თანაბარ ნაწილად. და ბლოკისთვის გარკვეული კლასის მინიჭებით, შეგიძლიათ დააყენოთ ბლოკის სიგანე ნაწილების საჭირო რაოდენობის ტოლი.

მაგალითად, ეს დიზაინი საშუალებას მოგცემთ გამოყოთ ერთი ფართო ბლოკი შინაარსისთვის 8 ნაწილის სიგანით და ერთი ვიწრო ბლოკი გვერდითი ზოლისთვის 4 ნაწილის სიგანით:

ბლოკების სიგანე ავტომატურად გამოითვლება ეკრანის სიგანის მიხედვით. მობილურ მოწყობილობაზე დათვალიერებისას ეს ბლოკები ერთმანეთის ქვეშ გადაინაცვლებს.

თქვენ ასევე შეგიძლიათ დაარეგულიროთ ბლოკის მანძილი კიდიდან, ისევ, ნაწილების საჭირო რაოდენობამდე. მაგალითად, ეს დიზაინი:

შეიქმნება ბლოკი 10 ნაწილის სიგანით, ეკრანის 1 ნაწილის მარცხენა შეწევით.

თუ დააკვირდებით, ჩატვირთვისას მუშაობა ძალიან აჩქარებს მუშაობას. უფრო მეტიც, ეს სტილები ნამდვილად მუშაობს სწორად და საიტზე არაფერი იქნება მრუდი.

სამომავლოდ ვგეგმავ რამდენიმე გაკვეთილის გამოქვეყნებას bootsrap-თან მუშაობის შესახებ. ამიტომ, გირჩევთ, არ გამოტოვოთ ეს მომენტი.

ვებსაიტის ადაპტაციის შემოწმება

მაგრამ ჩნდება კითხვა: როგორ შევამოწმოთ ვებსაიტის ადაპტირება? ახლა თქვენ დაწერეთ მედია მოთხოვნები CSS-ში, დააკავშირეთ bootstrap და გამოიყენეთ საჭირო კლასები. როგორ შეგიძლიათ შეამოწმოთ, რომ საიტი სწორად ადაპტირდება ეკრანის ყველა რეზოლუციით?

ძალიან ზუსტი და რაც მთავარია უფასო სერვისი, რომელიც იმსახურებს პატივისცემას და მადლიერებას ვებმასტერებისა და განლაგების დიზაინერებისგან, რომლებიც საქმე აქვთ ადაპტური განლაგებასაიტები.

აბა, როგორ მოგწონთ სტატია? ყველაფერი გასაგებია? თუ არა, დაწერეთ კომენტარებში, ჩვენ ერთად გავარკვევთ.

დიახ, საპასუხო ვებსაიტის დიზაინის შესაქმნელად, თქვენ უნდა იმუშაოთ. მაგრამ ეს ძალისხმევა დაჯილდოვდება საძიებო სისტემების და რაც მთავარია, თქვენი საიტის ვიზიტორების მხრიდან თქვენი საიტის მიმართ ხელსაყრელი დამოკიდებულებით.

ყველა სმარტფონის ერთ-ერთი მთავარი პარამეტრი არის ეკრანის გარჩევადობა. მოდით გაერკვნენ, რა არის ეს და რატომ არის ეს ასე მნიშვნელოვანი.

რა არის ეკრანის გარჩევადობა?

ეკრანის გარჩევადობა არის მნიშვნელობა, რომელიც ეხება ეკრანზე პიქსელების რაოდენობას სიგრძით და სიგანეში. ეს პარამეტრი მნიშვნელოვანია, რადგან ის განსაზღვრავს თითოეული სმარტფონის გამოსახულების სიცხადეს.

ეკრანის გარჩევადობა გავლენას ახდენს სურათის ხარისხზე. რაც უფრო დიდია ის, მით უკეთესი და ნათელი იქნება გამოსახულება. თუ მოწყობილობას აქვს დიდი ზომები, მაგრამ დაბალი გარჩევადობა, მაშინ პიქსელები გამოჩნდება სურათზე. რიცხვები და სიმბოლოები არასაკმარისად მკაფიო და, იშვიათ შემთხვევებში, მოუხერხებელი იქნება, როგორც ძველ ტელეფონებზე.

ჩართულია მომენტშისმარტფონების 99 პროცენტს აქვს სამი ტიპის ეკრანი

• HD (1280x720, 720p);
• Full HD (1920×1080, 1080p);
• Quad HD (2560×1440, 1440p).

ეკრანის რა გარჩევადობა უნდა ავირჩიო?

სმარტფონის ეკრანის ერთ-ერთი ყველაზე პოპულარული გარჩევადობა არის 1280 x 720 პიქსელი - HD. ბიუჯეტის ფასების სეგმენტის თითქმის ყველა გაჯეტი აღჭურვილია მხოლოდ ამ მაჩვენებლით.

უფრო ძლიერი მოწყობილობები აღჭურვილია უფრო მაღალი გარჩევადობის დისპლეებით. სმარტფონები 1920 x 1080 ეკრანებით დიდი ხნის წინ გამოჩნდა და აღარავის უკვირს. თუ სმარტფონის დიაგონალი 4,5-დან 5,5 ინჩამდეა, საუკეთესოდ შეეფერება 1920x1080 პიქსელიანი ეკრანი (Full HD). უფრო დაბალი გარჩევადობით, პიქსელები გამოჩნდება სურათზე და მომხმარებელმა შეიძლება იგრძნოს დისკომფორტი. ეს არის ალბათ ოქროს შუალედი - ფასები დაბალია, გამოსახულება ნათელი და ნათელი.

5,5 ინჩზე მეტი დიაგონალით, ფლაგმანი მოწყობილობები იყენებენ Quad HD გარჩევადობას (2650x1440). აქ გამოსახულების ხარისხი მაღალია, მაგრამ, მიხედვით, ადამიანის თვალი პრაქტიკულად ვერ ამჩნევს მნიშვნელოვან განსხვავებას. Quad HD მომავლის თვისებაა, ის აუცილებელია გაძლიერებული და ვირტუალური რეალობის ტექნოლოგიებისთვის.

ტექნიკური ჟურნალისტები უკვე რამდენიმე წელია ყვირიან პოსტ-კომპიუტერის ეპოქაზე, ტრადიციული ფორმის ფაქტორების კომპიუტერების გაყიდვები განუწყვეტლივ ეცემა, ისევე როგორც მათი მწარმოებლების აქციები. მაგრამ რაოდენობა მობილური მოწყობილობებისმარტფონები თუ პლანშეტები, სტაბილურად იზრდება.

დიზაინერისთვის ეს, უპირველეს ყოვლისა, ნიშნავს, რომ ტექნიკური მახასიათებელი შეიცავს თუ არა რაღაცას მობილური მოწყობილობების შესახებ, მან უნდა დახატოს განლაგება ისე, რომ საიტის გამოყენება შესაძლებელი იყოს ტელეფონიდან (და მით უმეტეს, ტაბლეტიდან). ). და ეს ნიშნავს არა მხოლოდ იმას, რომ ღილაკების დაჭერა შესაძლებელია თითით. იდეალურ შემთხვევაში, რა თქმა უნდა, საიტს უნდა ჰქონდეს ცალკე მობილური ვერსია, მაგრამ, როგორც ჩვენი გამოცდილება გვიჩვენებს, კლიენტების უმეტესობას არ სურს ამისთვის დამატებითი თანხის გამოყოფა, მაგრამ, რა თქმა უნდა, უჩივიან, თუ რამე არ მუშაობს მათთვის საყვარელი Apple მოწყობილობიდან.

გავიხსენოთ შეცდომები, რომლებიც მე ვიცი დიზაინერების მიერ დაშვებული, პირველი, რაც იწვევს მათ მიერ დახატულ განლაგების პრობლემას, არის ზუსტი წარმოდგენა იმის შესახებ, თუ რამდენი პიქსელი მოერგება ეკრანს ნომინალური გარჩევადობით 20'-ზე მაღალი. დესკტოპის მონიტორი. კარგი, არა უშავს, სწორედ ამისთვის იყო შექმნილი დიდი ნომრების მარკეტინგი. ეს სტატია დაგეხმარებათ გაიგოთ არსებული სიტუაცია.

ჩვენ ვსაუბრობთ მოწყობილობებზე Android-ზე და iOS-ზე, WP მაინც ეგზოტიკურია და პირადი გამოცდილების გარეშე მე არ ვიღებ ვალდებულებას რეკომენდაციების გაცემას.

თუ შიგნით HTML დოკუმენტიარ არსებობს მეტათეგები, რომლებიც მობილურ ბრაუზერს ეუბნებიან, თუ რა სიგანეზე უნდა აჩვენოს დოკუმენტი, მაშინ ბრაუზერები იქცევიან ისე, თითქოს დოკუმენტის სიგანე იყოს 980 პიქსელი. ეს ეხება ტელეფონებს, რომელთა ეკრანის სიგანე 320 პიქსელია, ასევე 10 დიუმიანი ტაბლეტებისთვის Android-ისა და iOS-ის და Webkit ბრაუზერის გამოყენებით. ეს მიდგომა ნიშნავს, რომ საიტებს, რომელთა მინიმალური სიგანეა 960 პიქსელი, ექნებათ მცირე მინდვრები შინაარსის წასაკითხად.

თუ დოკუმენტის მინიმალური სიგანე უფრო დიდია, მაშინ ბრაუზერების ქცევა იცვლება. Safari iPhone/iPad-ზე უბრალოდ შეკუმშავს შინაარსს უმეტეს შემთხვევაში. Android-ში, DIP - სიმკვრივისგან დამოუკიდებელი პიქსელები თავს იჩენს, რის შესახებაც მოგვიანებით. თუ დოკუმენტის სიგანე 980-ზე მეტია და მოწყობილობის სიგანეზე დიდია DIP-ში, გამოჩნდება გადახვევა მარჯვნივ. ასე რომ, საიტი, რომლის შიგთავსის სიგანეა 1040 პიქსელი, გამოჩნდება ჰორიზონტალური გადახვევის გარეშე iPhone-სა და iPad-ზე (1024 პიქსელი), მაგრამ გადახვევით ტელეფონებზე, როგორიცაა Galaxy S3 (ფიზიკური გარჩევადობა 1280x720) ან Nexus 7 ტაბლეტი (ფიზიკური გარჩევადობა 1280x800). ).

რა დასკვნები უნდა გაკეთდეს? დესკტოპებსა და ლეპტოპებზე ფართო ეკრანის სიმრავლის მიუხედავად, ძველმა კარგმა 960 პიქსელიანმა ქსელმა არ დაკარგა აქტუალობა. მობილური ბრაუზერებს ასევე აქვთ შესაძლებლობა მოათავსონ ტექსტური ბლოკები ისეთ ფორმატში, რომელიც ადვილად იკითხება მოწყობილობაზე, მაგალითად, ტექსტის შეკუმშვა ტელეფონის ვიწრო სვეტად და მისი შრიფტის გაფართოება. ეს არ იმუშავებს, თუ ბლოკის შემცველი ტექსტი მკაცრად შეზღუდულია სიმაღლეში. სინამდვილეში, არასოდეს არ უნდა შექმნათ ვებსაიტი, სადაც რაიმე შეზღუდულია სიმაღლეში, განსაკუთრებით თუ გეგმავთ ვიზიტორებს მობილური მოწყობილობებიდან. მობილური მოწყობილობების, განსაკუთრებით ტელეფონების კიდევ ერთი მტერი არის პოზიციის მქონე ელემენტები: ფიქსირებული. მაგალითად, ახლა მოდური უკანა ღილაკი, რომელიც დაჟინებით მიჰყვება მომხმარებელს გვერდის გარშემო. კიდევ უფრო უარესია დიდი კვერნები, როგორც ფიქსირებული თავსახური. ასეთი ელემენტები არა მხოლოდ იკავებს სასარგებლო ადგილს პატარა ეკრანზე, არამედ რჩება იმავე ადგილას გადიდებისას. პრობლემა ასევე დამახასიათებელია მოდალური ფანჯრებისთვის. თუ ისინი ეკრანის შუაშია ნაჩვენები, მაშინ მათი შიგთავსის გაფართოება მობილური ტელეფონიდან მოითხოვს საკმაოდ მოხერხებულობას. ამომხტარი ფანჯრების გამოყენება, როგორიცაა „დარჩით ჩვენთან სოციალური ქსელები!”, ამგვარად ქცევა ზოგადად სასტიკი უპატივცემულობაა მობილური მოწყობილობების მომხმარებლების მიმართ, რადგან ხშირად უფრო ადვილია საიტის დატოვება, ვიდრე ამ ამომხტარის დახურვა.

მოდით შევხედოთ რამდენიმე საიტს, როგორც მაგალითი.

იმისდა მიუხედავად, რომ Lenta.ru-ს აქვს ძალიან წესიერი მობილური ვერსია, მასზე ავტომატური გადასვლა არ არის. სამუშაო მაგიდაზე ფიქსირებული მენიუ გადაფარავს ტექსტს ავტომატური მასშტაბით. მომხმარებელი დგას არჩევანის წინაშე, ან ხელით გაასწოროს ან არ დაიზაროს მ. url-ში.

RBC. ზოგადად, მათ აქვთ მობილური ვერსიაც, მაგრამ მასზე გადასვლა ხორციელდება მხოლოდ მთავარი გვერდი. პირდაპირი ბმულის საშუალებით (კერძოდ, Google News-დან) შეგიძლიათ იხილოთ ეს წაუკითხავი ტილო. დარჩება თუ არა ვიზიტორი ასეთ საიტზე? ძლივს.

სუპერ კანონიკური ამომხტარი ფანჯარა RBC სტილში. შესანიშნავი მაგალითი იმისა, თუ რა არ უნდა გააკეთოს.

ინტანი, ვინც აკრიფა გამოიცანი ვინ. მე, რა თქმა უნდა, მშვენივრად მივხვდი, რატომ არ შეიძლებოდა ამის გაკეთება მენიუთი, მაგრამ რატომღაც არ ვიყავი კამათის ხასიათზე. კითხვის დასმა სრულიად უსიამოვნო თემაა.

კიდევ ერთი რამ, რაც ჩვეულებრივ არ ღირს დესკტოპზე დროის დახარჯვას და პრობლემებს იწვევს მობილურზე არის მორგებული ფორმის ელემენტები. ის ფაქტი, რომ ისინი თითქმის არ არის კონფიგურირებადი CSS-ის გამოყენებით, არ არის მხოლოდ იმიტომ, რომ მსოფლიო ქსელის კონსორციუმი იყო ზარმაცი.

მაგალითად, თქვენ დახატეთ ლამაზი ჩამოსაშლელი სია. ვთქვათ, რომ დესკტოპის ბრაუზერში ის ყველაფერს ჰგავს, მაუსის დაწკაპუნებით იხსნება და ბორბალით გადახვევა. მაგრამ მობილურზე ასეთ ელემენტებთან მუშაობა დიდ პრობლემებს შეგიქმნით. თუ არჩევა სტანდარტული იქნებოდა, მომხმარებელს ეჩვენებოდა სისტემის ფანჯარა ბარაბანი/ჩამოშლილი სიით, OS-ის მიხედვით.

iOS-ში ფაილის მიმაგრების ვარიანტი არ არის. და თუ ღილაკის სტანდარტული გარეგნობა მიანიშნებს მომხმარებელს, რომ ის გამორთულია, მაშინ ზოგიერთი ნათელი, ლამაზი ღილაკი მისცემს განცდას, რომ რაღაც არ მუშაობს თქვენს საიტზე.

რა თქმა უნდა, იდეალურ შემთხვევაში, მობილური მოწყობილობა უნდა იყოს იდენტიფიცირებული, ხოლო მობილური მოწყობილობებისთვის სტანდარტული ინტერფეისის შეცვლაზე მიმართული სკრიპტები არ უნდა იყოს შესრულებული.

მობილური ბრაუზერების კიდევ ერთი შემაშფოთებელი თვისება არის ის, რომ ისინი ამჟამად არ ინახავენ დანამატის შრიფტებს. იგივე PT Sans ყველა სტილში, რომელიც დაკავშირებულია Google Web Fonts-თან, ჩატვირთვას შესამჩნევად დიდი დრო სჭირდება. ამავდროულად, ის ძნელად შესამჩნევად ჩამორჩება ჩაშენებულ Helvetica / Roboto-ს. კარგად დაფიქრდით, ღირს თუ არა თქვენი მორგებული შრიფტის ჩატვირთვის დამატებითი დრო.

მობილური მოწყობილობის ეკრანის ზომები და გარჩევადობა. განსხვავება ეკრანის ფიზიკურ გარჩევადობასა და მობილური ბრაუზერის გარჩევადობას შორის

iPhone და iPad იყენებს Apple points-ის კონცეფციას. iPhone-ის გარჩევადობა მე-5 მოდელამდე არის 320 x 480 პიქსელი. რა არის ბადურის ჩვენება? Retina Display იყენებს პიქსელის ორმაგ სიმკვრივეს, რაც იმას ნიშნავს, რომ პიქსელზე არის 4 ფიზიკური პიქსელი. ამრიგად, iPhone 4-ს, რომლის ეკრანის ფიზიკური გარჩევადობა 640 x 960 პიქსელია, კვლავ აქვს 320 x 480 პიქსელი. მაგრამ ამავე დროს, გრაფიკა უფრო დეტალურია აპლიკაციებში ორჯერ დიდი სურათების გამოყენების გამო. iPhone 5-ისთვის პიქსელის მნიშვნელობა გაიზარდა 480-დან 568-მდე. ყველა ვერსიის iPad-ისთვის, Mini-ის ჩათვლით, ის უცვლელი რჩება - 1024x768.

ნაგულისხმევად, 1-დან 1-მდე მასშტაბით, სტანდარტული გრაფიკა ვებზე (მაგალითად, ფონის სურათი) გამოჩნდება ისე, თითქოს გაორმაგებული იყოს ერთი პიქსელი ფიზიკური ეკრანის 4 პიქსელით ბიტმაპი. როგორ გამოვიყენოთ გრაფიკა მაღალი გარჩევადობაასეთ სიტუაციაში განვიხილავთ შემდეგ ნაწილში. მთავარია გახსოვდეთ ნებართვების შესახებ iOS მოწყობილობები- არ იფიქროთ, რომ ბადურის და არაბადურის გვერდებს განსხვავებული სიგანე აქვთ. არა, განსხვავება მხოლოდ პიქსელის სიმკვრივეშია, პროპორციები აბსოლუტურად იგივეა.

Android-ში სიტუაცია ბევრად უფრო რთული, ზუსტი და მრავალფეროვანია. Android იყენებს ეკრანის სხვადასხვა სიმკვრივის კონცეფციას (DPI). მისი არსი არის ის, რომ განსხვავებული ფიზიკური ზომებიჩვენება და გარჩევადობა, წერტილების ქცევის ნიმუში განსხვავდება მოწყობილობის დანიშნულების მიხედვით. Points-ის ანალოგი არის ზემოაღნიშნული DIP.

ეკრანის სიმკვრივე - 1. ამ კატეგორიაში შედის მრავალი მოწყობილობა, როგორიცაა 320x480 ტელეფონები (HTC Hero, LG Optimus One), 7 დიუმიანი ტაბლეტები 1024x600 ( Samsung Galaxy Tab, Kindle Fire), 10 დიუმიანი ტაბლეტები (Asus Transformer, Acer A500, Galaxy Tab 10’1).

ეკრანის სიმკვრივე 1.33 გამოიყენება 7 დიუმიან ტაბლეტებში, როგორიცაა Nexus 7. ფიზიკური გარჩევადობა არის 1280x800, DIP-ში - 960x600.

ეკრანის სიმკვრივე 1.5 - მობილური ტელეფონებიმაღალი ფასის კატეგორია 2011 და საშუალო 2012, 10 დიუმიანი ტაბლეტები FullHD-ით. მაგალითად, Nexus One 480x800 პიქსელი, 360x533* DIP, HTC One S - 540x960 პიქსელი, 360x640 DIP და Asus Transformer Pad Infinity 1920x1200 პიქსელი, 1280x800 DIP.

*Android Developers-ზე ეს არის 534, მაგრამ ბრაუზერის სიგანის გაზომვა JS-ის საშუალებით აჩვენებს ზუსტად 533-ს, ამიტომ მედია შეკითხვებში ყურადღება უნდა გაამახვილოთ ამ ფიგურაზე.

ეკრანის სიმკვრივე 2 - 2012 წლის მაღალი ფასის კატეგორიის ტელეფონები და ფაქტიურად რამდენიმე ტაბლეტი. მაგალითად, HTC One X, Samsung Galaxy S3 - ეკრანის გარჩევადობა 1280x720, ზომები DIP 360x640. Google Nexus 10 ტაბლეტი - გარჩევადობა 2560x1600 პიქსელი, 1280x800 DIP.

ეკრანის სიმკვრივე 3 - 2013 წლის ფლაგმანები FullHD ეკრანით. 1920x1080 პიქსელის გარჩევადობით, მათ კვლავ აქვთ იგივე 360x640 DIP.

ამ ყველაფერთან ერთად არის ასევე შეხების გარეშე Google Nexus 4 1280x768 პიქსელიანი ეკრანით 2 (384x640) სიმკვრივით. ეკრანის ღილაკების მქონე მოდელებში, 42DIP იკავებს მათ პანელს, ამიტომ ამ ტიპის მოდელებში (Galaxy Nexus, Nexus 4, Sony Xperiaზ) in პორტრეტის რეჟიმიპორტრეტის გარჩევადობა ოდნავ დაბალი იქნება და 598 პიქსელს შეადგენს.

ამრიგად, ჩვენ გვაქვს პორტრეტების სამი რეზოლუცია - 320, 460 და იშვიათი 384, და ოთხნახევარი ლანდშაფტი - 480, 533, 568, 640 (598 რბილი კლავიშებით).

ტაბლეტებისთვის ეს არის პორტრეტი 600 და 800 და ლანდშაფტი 960, 1024 და 1280.

ქვემოთ მოცემულ ცხრილში მოცემულია ყველაზე ტიპიური რეზოლუციები პოპულარული პროდუქტებისთვის:

როგორ დავიწყოთ მუშაობა მობილური აპლიკაციის განლაგებაზე?

პირველ რიგში, წაიკითხეთ ინსტრუქციები. აპლიკაციები სხვადასხვა პლატფორმისთვის განსხვავებულად უნდა გამოიყურებოდეს. მაგალითად, ბმულის შემდეგ შეგიძლიათ შეადაროთ სხვადასხვა ოპერაციული სისტემის ტიპიური ელემენტები

თქვენი iPhone აპის განლაგებაზე სამუშაოდ, შექმენით 640x1136 (960) ტილო და გამოიყენეთ ორი განზომილების ჯერადი. ყველა გრაფიკა, ყველა შრიფტი ასეთი უნდა იყოს.

თქვენს მომავალ აპლიკაციაში ეკრანის გარკვეული ნაწილი შეიძლება დაიკავოს სტატუსის ზოლმა სიგნალის ინდიკატორებით, ბატარეის ინდიკატორებით და ა.შ. ეს არის 20 ქულა iOS-ში და 25 DIP Android-ში. IN Android ტელეფონებირბილი კლავიშებითა და ტაბლეტებით, ეკრანის ქვედა ნაწილში 48 DIP უკავია მათთვის ადგილი (ნავიგაციის ზოლი). უფრო მეტიც, არაკანონიკურ მოწყობილობებში, როგორიცაა სამსუნგის ტაბლეტებინავიგაციის ზოლის საკუთრების გამოყენების გამო და სტატუსის ზოლიკომბინირებული.

Android ტელეფონებისთვის განკუთვნილი აპლიკაციისთვის მნიშვნელოვანია აიღოთ ჰოსტი მინიმუმ 720x1280. უმჯობესია გადახვიდეთ პირდაპირ 1080x1960-ზე, თანამედროვე ფლაგმანების საფუძველზე.

720x1280 ტილოსთვის ზომები ასევე უნდა იყოს ორის ჯერადი, 1080x1960-ისთვის სამის ჯერადი. 480x800 ან 640x960 ტილოს გამოყენება ძალიან ცუდი იდეაა.

განლაგებაზე მუშაობისას საჭიროა პერიოდულად შეამციროთ ფანჯრის ზომა. გრაფიკული რედაქტორირეალური მოწყობილობის სავარაუდო ზომამდე, ასევე შეინახეთ JPG და ნახეთ რეალურ მოწყობილობაზე. შესაძლებელია თუ არა ღილაკზე თითის დაჭერა? ტექსტი ძალიან პატარაა?

თუ იყენებთ შეუსაბამო ზომის განლაგებას, აპლიკაციის მრუდე გარეგნობის ან მისი ბუნდოვანი გრაფიკის ბრალი მთლიანად თქვენი იქნება.

ზოგადად, იყავით ყურადღებიანი დეტალების მიმართ და დაიმახსოვრეთ - პიქსელები და წერტილები/დაწევები აღარ არის იგივე.

ვებ გრაფიკის ოპტიმიზაცია მაღალი სიმკვრივის ეკრანებისთვის

ასე რომ, ჩვენ გავიგეთ, რომ არსებობს რამდენიმე შესაძლო ვარიანტებიპიქსელის სიმკვრივე ეკრანზე. შესაბამისად, ბუნდოვანი გრაფიკის ეფექტის თავიდან ასაცილებლად, რომელიც ასევე ცნობილია როგორც "Playstation ეფექტი", ჩვენ უნდა გამოვიყენოთ უფრო მაღალი გარჩევადობის რასტრული გრაფიკა, ან ვექტორული გრაფიკამაგალითად SVG.

თუმცა, SVG მხარდაჭერა ჯერ კიდევ ძალიან შეზღუდულია და ძველ ბრაუზერებთან უკან თავსებადობისთვის მაინც მოგიწევთ რასტერის გამოყენება. კიდევ ერთი თავის ტკივილი იქნება სპრაიტების გამოყენება - ფონის პოზიციის მნიშვნელობები პროცენტების სახით უნდა იყოს მითითებული, რაც ბევრ მათემატიკას მოითხოვს. ყველაზე ნაკლებად რთული გზაა ერთი და იგივე სურათების მრავალი ვარიაციის გამოყენება მედია მოთხოვნის საშუალებით, მაგალითად -webkit-min-device-pixel-ratio: 2.

როგორც ხედავთ, ტექნიკა თავისთავად ძალიან მარტივია და მხოლოდ ერთი და იმავე სურათის რამდენიმე ვერსიის არსებობას მოითხოვს, თუ ის გამოიყენება როგორც ფონის გამოსახულება. ჩვეულებრივი სურათები, საჭიროების შემთხვევაში, შეიძლება აიტვირთოს ორჯერ უფრო დიდი ვიდრე უნდა იყოს და გვერდზე საჭირო ზომა შეიძლება განისაზღვროს style ატრიბუტის გამოყენებით.

მინუსი არის, ფაქტობრივად, მაღალი რეზოლუციის სურათების დიდი წონა. აქ თქვენ უნდა გადაწყვიტოთ რა არის უფრო მნიშვნელოვანი - კონტენტი, რომელსაც მომხმარებელი ნახავს უფრო დიდი ხნის შემდეგ გვერდის სიმძიმის გამო, თუ დიზაინი.

ხმები: 416 | ნახვები: 4271