Վերջերս իմ ընկերը կապվեց ինձ հետ ՝ խնդրելով օգնություն խնդրել WordPress կայքի հետ, որը նա կառուցել էր X թեման օգտագործելով: Նրա հաճախորդն այդ առավոտ զանգահարել էր նրան այն բանից հետո, երբ նկատեց, որ իր կայքը ճիշտ չի ցուցադրվում իր iPhone- ում: Նիկն ինքը ստուգեց դա, և համոզված եմ, որ նրա հեղինակած գեղեցիկ պատասխանատու դիզայնն այլևս չէր գործում:
Նրան հետագայում միստացրեց այն փաստը, որ երբ նա փոխեց իր զննարկչի պատուհանը իր աշխատասեղանին ՝ կայքը էր արձագանքող, բայց նրա iPhone- ում ցուցադրվում էր միայն աշխատասեղանի տարբերակը: Ինչու կլինի կայք պատասխանատու սեղանադիր համակարգչում և անպատասխան բջջային սարքի վրա
Ինչու չի գործում պատասխանատու դիզայնը
Պատասխանատու դիզայնը դադարում է աշխատել, երբ HTML ֆայլի վերնագրում բացակայում է ծածկագրի մեկ տող: Եթե ծածկագրի այս մեկ տողը բացակայում է, ձեր iPhone- ը, Android- ը և այլ շարժական սարքերը ենթադրում են, որ ձեր դիտած կայքը լրիվ չափի աշխատասեղանի կայք է և կարգավորում է դրա չափը: տեսադաշտ ընդգրկել ամբողջ էկրանը:
Ի՞նչ նկատի ունեք տեսադաշտի և տեսադաշտի չափի ներքո:
Բոլոր սարքերում դիտման ծավալի չափը վերաբերում է այն էջի տարածքի չափին, որը ներկայումս տեսանելի է օգտագործողի համար: Պատկերացրեք, որ ձեր ձեռքում է iPhone 5-ը ՝ 320 պիքսել լայնությամբ: Եթե հստակորեն այլ բան չի ասվել, iPhones- ը ենթադրում է, որ ձեր այցելած յուրաքանչյուր կայք աշխատասեղանի կայք է `980px լայնությամբ:
Այժմ, օգտագործելով ձեր մտացածին iPhone 5-ը,դուք այցելում եք կայք, որը նախատեսված է աշխատասեղանի համար, որի լայնությունը 800px է: Այն չունի պատասխանատու դասավորություն, ուստի ձեր iPhone- ը ցուցադրում է աշխատասեղանի ամբողջ լայնությամբ տարբերակը:
իմ հեռախոսը կարծում է, որ ես այլ քաղաքում եմ
Բայց iPhone 5-ի լայնությունը ընդամենը 320 պիքսել է: Դա միշտ չէ՞, որ դիտանկարի չափն է:
Ոչ Դա չէ. Տեսադաշտի չափով, մասշտաբավորումը կարող է ներգրավվել , IPhone- ը պետք է փոքրացնի, որպեսզի տեսնի էջի ամբողջական լայնությունը: Հիշեք, որ տեսադաշտը վերաբերում է էջի այն տարածքին, որը ներկայումս տեսանելի է օգտագործողի համար: Այս պահին iPhone- ի օգտվողը տեսնում է էջի ընդամենը 320 պիքսել, թե՞ տեսնում է լրիվ լայնությամբ տարբերակը:
Rightիշտ է. Նրանք իրենց ցուցադրման մեջ տեսնում են ամբողջ լայնությամբ էջը, քանի որ iPhone- ը ենթադրել է, որ դա իր կանխադրված պահվածքն է. Այն փոքրացրել է, որպեսզի օգտվողը կարողանա դիտել մինչև 980 պիքսել լայնություն ունեցող էջ: Հետևաբար, iPhone- ի տեսադաշտը 980px է:
Մեծացնելիս կամ փոքրացնելուն պես դիտապատկերի չափը փոխվում է: Մենք նախկինում ասացինք, որ մեր մտացածին կայքն ունի 800px լայնություն, այնպես որ, եթե ձեր iPhone- ը մեծացնեիք այնպես, որ կայքի եզրերը դիպչեին ձեր iPhone- ի էկրանին եզրերին, դիտապատկերը կկազմեր 800px: IPhone- ը կարող է ունենալ սեղանադիր կայք 320px: բայց եթե դա ունենար, ապա դրա մի փոքր մասը միայն կտեսնեիք:
iphone- ում ծրագիր ներբեռնելը
Իմ պատասխանատու կայքը կոտրված է: Ինչպե՞ս շտկել այն:
Պատասխանը HTML- ի մեկ տող է, որը տեղադրվելիս վեբ էջի վերնագրում սարքին ասում է, որ դիտապատուհանը դնի իր սեփական լայնության վրա (iPhone 5-ի դեպքում `320 հատ) և չխոշորացնել (կամ մեծացնել) էջը:
Այս մետա պիտակին վերաբերող բոլոր տարբերակների վերաբերյալ ավելի տեխնիկական քննարկման համար ստուգեք այս հոդվածը tutsplus.com կայքում ,
Ինչպես շտկել WordPress X թեման, երբ այն չի արձագանքում
Նախկինից վերադառնալ իմ ընկերոջը. Կոդի այս մեկ տողն անհետացավ, երբ նա թարմացրեց X թեման: Ձերը շտկելիս հիշեք, որ X թեման չի օգտագործում միայն մեկ վերնագիր ֆայլ. Այն օգտագործում է տարբեր վերնագրի ֆայլեր յուրաքանչյուր դեղի համար, այնպես որ դուք ստիպված կլինեք խմբագրել ձերը:
iphone 5 -ի էկրանին կան գծեր
Քանի որ Նիքն օգտագործում է X թեմաների Ethos բուրգ, նա ստիպված էր ավելացնել վերոհիշյալ կոդի տողը վերնագրի ֆայլին, որը գտնվում էր x- ում /frameworks/views/ethos/wp-header.php , Եթե այլ բույր եք օգտագործում, փոխարինեք ձեր կույտի անունը (ամբողջականություն, նորացում և այլն) «էթոսի» փոխարեն ՝ վերնագրի ճիշտ ֆայլը գտնելու համար: Տեղադրեք այդ մեկ տողը և voila! Դուք լավ եք գնալու
Այսպիսով, սա նույնպես շտկո՞ւմ է իմ CSS մեդիայի հարցումները:
Երբ այդ տողը տեղադրեք ձեր HTML ֆայլի վերնագրում, ձեր պատասխանատու @ media հարցումները հանկարծ կսկսեն նորից աշխատել, և ձեր կայքի բջջային տարբերակը կվերադառնա կյանքի: Շնորհակալություն ընթերցելու համար, և հուսով եմ, որ այն կօգնի:
Հիշեք Payette- ի առաջ,
Դեյվիդ Պ.